<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <!-- <a-collapse class="top" :default-active-key="['1']" expand-icon-position="right">
      <a-collapse-item key="1">
        <template #header>
          <div class="box">
            <div class="line"></div>
            <div class="text">客户列表数据</div>
          </div>
        </template>
        <template #extra>
          <div> 收起</div>
        </template>
        <div class="flex">
          <div v-for="item in state" :key="item.id" class="dataBox">
            <img class="img" :src="item.img" alt="" />
            <div style="line-height: 35px">
              <div class="name">
                {{ item.name }}
                <a-tooltip v-if="item.id !== 1" :content="item.introduce">
                  <icon-exclamation-circle />
                  <template #content>
                    {{ item.introduce }}
                  </template>
                </a-tooltip>
              </div>
              <div class="number">{{ item.number }}位</div>
            </div>
          </div>
        </div>
      </a-collapse-item>
    </a-collapse> -->
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        style="width: 50%"
                        v-model="type"
                        @change="typeFn"
                        placeholder="first"
                      >
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input style="width: 50%" v-model="typeText" placeholder="请输入搜索条件"
                        ><template #suffix v-if="type != 'userName'">
                          <icon-plus @click="open" style="cursor: pointer" /> </template
                      ></a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="state" hide-label>
                    <a-select v-model="form.state" placeholder="请选择客户状态" allow-clear>
                      <a-option value="0">正常</a-option>
                      <a-option value="1">关闭</a-option>
                      <!-- <a-option value="2">离职</a-option> -->
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="grade" hide-label>
                    <a-select v-model="form.grade" placeholder="请选择账户等级" allow-clear>
                      <a-option value="1">一级客户</a-option>
                      <a-option value="2">二级客户</a-option>
                      <a-option value="3">三级客户</a-option>
                      <!-- <a-option value="2">离职</a-option> -->
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="realName" hide-label>
                    <a-select v-model="form.realName" placeholder="请选择实名状态" allow-clear>
                      <a-option value="-1">未实名</a-option>
                      <a-option value="0">已实名</a-option>
                      <a-option value="1">待审核</a-option>
                      <a-option value="2">已失败</a-option>
                      <a-option value="3">已驳回</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="warningState" hide-label>
                    <a-select
                      v-model="form.warningState"
                      placeholder="请选择余额预警状态"
                      allow-clear
                    >
                      <a-option value="1">已开启</a-option>
                      <a-option value="0">未开启</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addTime"
                      show-time
                      placeholder="请选择开始创建时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endTime"
                      show-time
                      placeholder="请选择结束创建时间"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addBalance" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addBalance" placeholder="开始余额" allow-clear />
                      <a-input v-model="form.endBalance" placeholder="结束余额" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        html-type="submit"
                        v-permission="getUserList"
                        @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="getUserList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button type="primary" v-permission="postAddUser" @click="showAdd">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>新建</template>
          </a-button>
          <a-button
            type="outline"
            v-permission="exportUser"
            :loading="loading"
            @click="exportDepartments"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :row-class-name="rowClassNameFun"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          table-layout-fixed
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          @row-click="handleRowClick"
          :scroll="{ x: 1500 }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
              :width="item.width"
              :ellipsis="true"
              :tooltip="true"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'remarks'" #cell="{ record }">
                <div class="inputsa" v-if="record.remarks">
                  <input
                    hide-button
                    class="inputsp"
                    @blur="changeRemarks(record)"
                    v-model="record.remarks"
                  />
                </div>
                <div class="inputsa" v-else>
                  <input
                    hide-button
                    style="width: 100px"
                    class="inputsp"
                    @blur="changeRemarks(record)"
                    v-model="record.remarks"
                  />
                </div>
              </template>
              <template v-if="item.key === 'userRealName'" #cell="{ record }">
                <a-tag color="blue" v-if="record.realName == 0">已实名 </a-tag>
                <a-tag v-else-if="record.realName == 1">待审核 </a-tag>
                <a-tag color="red" v-else-if="record.realName == 2">已失败 </a-tag>
                <a-tag color="red" v-else-if="record.realName == -1">已驳回 </a-tag>
                <a-tag v-else>未实名 </a-tag>
              </template>
              <template v-else-if="item.key === 'api'" #cell="{ record }">
                <span v-if="record.api">
                  <a-tag color="blue"> 已开启</a-tag>
                </span>
                <span v-else>
                  <a-tag>未开启</a-tag>
                </span>
              </template>

              <template v-else-if="item.key === 'gender'" #cell="{ record }">
                {{ record.gender === 1 ? '男' : '女' }}
              </template>
              <template v-else-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="blue" v-if="record.state === 0">正常</a-tag>
                <a-tag
                  style="cursor: pointer"
                  @click="() => $message.warning('关闭原因：' + record.stateRemarks)"
                  color="red"
                  v-else-if="record.state === 1"
                  >关闭</a-tag
                >
              </template>
              <template v-else-if="item.key === 'balance'" #cell="{ record }">
                <span>{{ '￥' + record.balance }}</span>
              </template>
              <template v-else-if="item.key === 'activation'" #cell="{ record }">
                {{ record.cardStatistics.activation }}张
              </template>
              <template v-else-if="item.key === 'total'" #cell="{ record }">
                {{ record.cardStatistics.total }}张
              </template>
              <template v-else-if="item.key === 'print'" #cell="{ record }">
                <span v-if="record.cardStatistics.activation > 0">
                  {{
                    Math.floor(
                      (record.cardStatistics.activation / record.cardStatistics.total) * 100 * 100
                    ) / 100
                  }}%</span
                >
                <span v-else> 0% </span>
              </template>

              <template v-else-if="item.key === 'sessions'" #cell="{ record }">
                <a-button
                  style="margin-right: 5px; padding: 0px"
                  type="text"
                  @click="clickT(record.sessions)"
                  size="small"
                >
                  {{ record.sessions.length }}&nbsp;台</a-button
                >
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span @click="updatUserPop(record, 1)">{{ record.userName }}</span>
              </template>
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <div style="width: 168px; display: flex; flex-wrap: wrap">
                  <a-button
                    v-permission="lookUserInfo"
                    style="margin-right: 5px; padding: 0px; padding: 0px"
                    type="text"
                    size="small"
                    @click="updatUserPop(record, 1)"
                    >详情</a-button
                  >
                  <a-button
                    v-permission="postEditUser"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="updatUserPops(record)"
                    >编辑</a-button
                  >
                  <a-button
                    v-permission="getFenrunList"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="showfenrun(record)"
                    >分润</a-button
                  >
                  <a-button
                    v-permission="postOrderly && postDisOrder"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="delimitation(record)"
                    >划卡</a-button
                  >

                  <a-button
                    v-permission="userBalance"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="balancePlay(record)"
                    >充值</a-button
                  >
                  <a-button
                    v-permission="gotoUserUrl"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="gotoUser(record)"
                    >登录</a-button
                  >
                  <a-button
                    v-permission="changePass"
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    @click="changePassWord(record)"
                    >密码</a-button
                  >

                  <a-dropdown :popup-max-height="false" trigger="hover">
                    <a-button
                      type="text"
                      style="margin-right: 5px; padding: 0px; font-size: 20px"
                      size="small"
                      ><div>···</div></a-button
                    >
                    <template #content>
                      <a-doption v-permission="authority" @click="openCopyright(record)"
                        >代理版权</a-doption
                      >
                      <a-doption
                        v-permission="'/app/mall/profit/sharing/list'"
                        @click="openGoodProfit(record)"
                        >商城分润</a-doption
                      >
                      <a-doption v-permission="'/app/user/set/code'" @click="openCode(record)"
                        >邀请码</a-doption
                      >
                      <a-doption v-permission="authority" @click="setBan(record)"
                        >设置权限</a-doption
                      >
                      <a-doption v-permission="changeUserState" @click="changeState(record)"
                        >修改状态</a-doption
                      >
                      <a-doption v-permission="trawUser" @click="trawUsers(record)"
                        >账户解冻</a-doption
                      >
                      <a-doption v-permission="getDelUser" @click="onDeleteItem(record)"
                        >删除账户</a-doption
                      >
                    </template>
                  </a-dropdown>
                </div>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div
          style="
            border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
            border-top: 0;
            padding: 12px;
            text-align: left;
          "
          >统计：账户余额:{{ totals.amount }}元
          <!-- <span style="margin-left: 10px"
            >卡板总数:{{ Math.floor(totals.card_total * 100) / 100 }}张</span
          >
          <span style="margin-left: 10px"
            >激活总数:{{ Math.floor(totals.card_activation * 100) / 100 }}张</span
          > -->
        </div>
      </template>
      <template #footer>
        <TableFooter :pagination="pagination" position="center" />
      </template>
    </TableBody>
    <!-- 权限 -->
    <a-modal
      v-model:visible="warvisible"
      @before-close="handleSetBan"
      title="权限设置"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="warForms" :auto-label-width="true" :model="warForm">
        <a-form-item field="api" label="接口对接">
          <a-radio-group v-model="warForm.api" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="batchRecharge" label="批量充值">
          <a-radio-group v-model="warForm.batchRecharge" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="collection" label="代理收款">
          <a-radio-group v-model="warForm.collection" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="cardOperation" label="停机复机">
          <a-radio-group v-model="warForm.cardOperation" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="cardLogin" label="卡号登录">
          <a-radio-group v-model="warForm.cardLogin" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="customSetRealName" label="自定义名称">
          <a-radio-group v-model="warForm.customSetRealName" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="customLogo" label="独立版权">
          <a-radio-group v-model="warForm.customLogo" class="radio-bcg">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <div style="padding-bottom: 20px">
        <a-divider dashed>常见问题</a-divider>
      </div>
      <a-collapse :default-active-key="['1']">
        <a-collapse-item header="卡号登录功能注意事项" key="1">
          <template #expand-icon>
            <icon-down />
          </template>
          <div>1：卡号登录权限必须在开启接口对接权限时，才能关闭，否则无法关闭</div>
          <div
            >2：开启独立版权后，如果代理需要自己解析域名时，请同时给代理开启
            代理收款，否则代理无法进行收款</div
          >
        </a-collapse-item>
      </a-collapse>
      <template #footer>
        <a-space>
          <a-button @click="handleSetBan">取消</a-button>
          <a-button type="primary" @click="handleOkAuthority">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 分润 -->
    <a-modal
      v-model:visible="fenrunvisible"
      @before-close="fenrunvisible = false"
      title="客户分润"
      width="900px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="serchForm2" :model="fenrunForm" :style="{ width: '100%', marginBottom: '0px' }">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item field="channelId" hide-label>
              <a-select
                v-model="fenrunForm.channelId"
                placeholder="请选择渠道"
                allow-clear
                allow-search
              >
                <a-option v-for="item in channel" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item field="seriesId" hide-label>
              <a-select
                v-model="fenrunForm.seriesId"
                placeholder="请选择系列"
                allow-clear
                allow-search
              >
                <a-option v-for="item in seriess" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="state" hide-label>
              <a-select v-model="fenrunForm.type" placeholder="请选择套餐类型" allow-clear>
                <a-option value="0">无限叠加</a-option>
                <a-option value="1">基础套餐</a-option>
                <a-option value="2">叠加包</a-option>
                <!-- <a-option value="3">体验包</a-option> -->
                <!-- <a-option value="2">离职</a-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="state" hide-label>
              <a-select v-model="fenrunForm.profit" placeholder="请选择分润状态" allow-clear>
                <a-option :value="1">已分润</a-option>
                <a-option :value="0">未分润</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-spin :loading="classLoading" tip="加载中····" style="width: 100%">
        <a-table
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :row-class-name="rowClassNameFun"
          :data="table2.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          table-layout-fixed
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumnsfenrunList.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
              :width="item.width"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    :key="record"
                    @click="showUpdateFenrun(record)"
                    >编辑</a-button
                  >
                  <a-button
                    style="margin-right: 5px; padding: 0px"
                    type="text"
                    size="small"
                    status="warning"
                    @click="resetFenrun(record)"
                    >回收</a-button
                  >
                </a-space>
              </template>
              <template v-else-if="item.key === 'usercost'" #cell="{ record }">
                <span v-if="record.setMealUser">
                  <div
                    v-if="record.showInput == false"
                    style="padding: 5px"
                    @click="record.showInput = true"
                  >
                    {{ record.setMealUser.cost }}</div
                  >
                  <a-input-number
                    v-else
                    hide-button
                    v-focus
                    @focus="inputgetRecord(record)"
                    @blur="inputSubmit(record)"
                    :style="{ background: 'none' }"
                    v-model="record.setMealUser.cost"
                  />
                </span>
                <span v-else>未分润</span>
              </template>
              <template v-else-if="item.key === 'userprice'" #cell="{ record }">
                <span v-if="record.setMealUser">
                  <div
                    v-if="record.showInputs == false"
                    style="padding: 5px"
                    @click="record.showInputs = true"
                  >
                    {{ record.setMealUser.price }}</div
                  >
                  <a-input-number
                    v-else
                    hide-button
                    v-focus
                    @focus="inputgetRecord(record)"
                    @blur="inputSubmit(record)"
                    :style="{ background: 'none' }"
                    v-model="record.setMealUser.price"
                  />
                </span>
                <span v-else>未分润</span>
              </template>
              <template v-else-if="item.key === 'price'" #cell="{ record }">
                <span>{{ record.price }}</span>
              </template>
              <template v-else-if="item.key === 'cost'" #cell="{ record }">
                <span>{{ record.cost }}</span>
              </template>

              <template v-else-if="item.key === 'close'" #cell="{ record }">
                <span v-if="record.setMealUser">
                  <a-tag color="red" size="small" v-if="record.setMealUser.close == true"
                    >关闭</a-tag
                  >
                  <a-tag color="blue" size="small" v-else-if="record.setMealUser.close == false"
                    >正常</a-tag
                  ></span
                >
                <span v-else> <a-tag size="small">未分润</a-tag></span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination2" position="center" />
      </a-spin>
      <template #footer>
        <a-space style="width: 100%; display: flex; justify-content: space-between">
          <div>
            <span style="margin-right: 20px">分润方案</span>
            <a-radio-group v-model="checkFenrunType" @change="changeType">
              <a-radio :value="0">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">成本分润</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">个性分润</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
          <div v-if="checkFenrunType == 0">
            <a-input-number
              hide-button
              :style="{ width: '320px' }"
              v-model="type0Num"
              placeholder="请输入分润比例"
              allow-clear
            >
              <template #append>
                <a-button type="primary" status="success" @click="fuzhuClick">辅助计算</a-button>
              </template>
            </a-input-number>
            <a-button type="primary" style="margin-left: 12px" @click="submitFenrunList"
              >确认分润</a-button
            >
          </div>
          <div v-else>
            <a-input-number
              hide-button
              :style="{ width: '450px' }"
              placeholder="请输入金额"
              v-model="type0Num"
              allow-clear
            >
              <template #prepend>
                <a-select v-model="gexingFenrunType" placeholder="请选择客户状态">
                  <a-option :value="0">系统成本+金额=客户成本</a-option>
                  <a-option :value="1">系统售价-金额=客户成本</a-option>
                  <a-option :value="2" v-if="fenrunForm.profit == 1"
                    >客户成本+金额=客户成本</a-option
                  >
                </a-select>
              </template>
              <template #append>
                <a-button type="primary" status="success" @click="fuzhuClick">辅助计算</a-button>
              </template>
            </a-input-number>
            <a-button type="primary" style="margin-left: 12px" @click="submitFenrunList"
              >确认分润</a-button
            >
          </div>
          <!-- <a-button @click="handleCancelsb">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBansb">确定</a-button> -->
        </a-space>
      </template>
    </a-modal>
    <!-- 添加客户 -->
    <a-modal
      v-model:visible="visible"
      @before-close="handleCancel"
      title="添加客户"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="userForm" :auto-label-width="true" label-align="left" :model="subForm">
          <a-form-item
            label="登录账号"
            field="userName"
            asterisk-position="end"
            :rules="[{ required: true, message: '登录账号不能为空' }]"
            :validate-trigger="['change', 'input']"
          >
            <a-textarea v-model="subForm.userName" placeholder="请输入客户登录账号" allow-clear />
            <template #extra>
              <div
                >需要一次新建多个客户的，请一行一个输入客户登录账号,<span
                  style="color: #3491fa; cursor: pointer"
                  @click="userdetectFn"
                  >点此立即检测账号</span
                ></div
              >
            </template>
          </a-form-item>
          <a-form-item label="登录密码" field="passWordmd5">
            <a-input
              v-model.trim="subForm.passWordmd5"
              placeholder="请输入客户登录密码，不填默认123456"
              allow-clear
            >
              <template #suffix>
                <span @click="clickSj" style="color: rgb(var(--primary-6)); cursor: pointer"
                  >随机密码</span
                >
              </template>
            </a-input>
            <template #extra>
              <div>不填密码则密码默认为123456</div>
            </template>
          </a-form-item>

          <a-form-item field="remarks" label="备注">
            <a-input hide-button v-model="subForm.remarks" placeholder="请输入备注" allow-clear />
          </a-form-item>
          <a-divider dashed>其他设置</a-divider>
          <a-form-item field="phone" label="手机号码">
            <a-input
              hide-button
              v-model="subForm.phone"
              placeholder="请输入客户手机号码"
              allow-clear
            />
            <template #extra>
              <div>客户的手机号码，填写后将会给客户绑定手机号</div>
            </template>
          </a-form-item>
          <a-form-item field="email" label="邮箱号码">
            <a-input
              hide-button
              v-model="subForm.email"
              placeholder="请输入客户邮箱号码"
              allow-clear
            />
            <template #extra>
              <div>客户的邮箱号码，填写后将会给客户绑定邮箱号码</div>
            </template>
          </a-form-item>
          <a-form-item field="warningBalance" label="余额预警">
            <a-input
              hide-button
              v-model="subForm.warningBalance"
              placeholder="请输入预警余额"
              allow-clear
            />
            <template #extra>
              <div>填写预警金额后，将会开启余额预警，客户余额低于闻值，将会发送提醒</div>
            </template>
          </a-form-item>
          <!-- </a-tab-pane>
            <a-tab-pane key="2" title="权限设置">
              <a-form-item field="api" label="接口对接">
                <a-radio-group v-model="subForm.api">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="batchRecharge" label="批量充值">
                <a-radio-group v-model="subForm.batchRecharge">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="collection" label="代理收款">
                <a-radio-group v-model="subForm.collection">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="cardOperation" label="停机复机">
                <a-radio-group v-model="subForm.cardOperation">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="cardLogin" label="卡号登录">
                <a-radio-group v-model="subForm.cardLogin">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="customSetRealName" label="自定义名称">
                <a-radio-group v-model="subForm.customSetRealName">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="customLogo" label="独立版权">
                <a-radio-group v-model="subForm.customLogo">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-tab-pane>
          </a-tabs> -->
        </a-form>
      </div>
      <template #footer>
        <a-space v-if="subForm.id">
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk">确定</a-button>
        </a-space>
        <div v-else style="display: flex; justify-content: space-between; width: 100%">
          <a-checkbox v-model="checked1s">继续新建下一个客户</a-checkbox>
          <a-space>
            <a-button @click="handleCancel">取消</a-button>
            <a-button type="primary" @click="handleBeforeOk">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 编辑客户 -->
    <a-modal
      v-model:visible="visibleEdit"
      @before-close="handleCancelEdit"
      title="编辑客户信息"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="userFormEdit" :auto-label-width="true" label-align="left" :model="subFormEdit">
          <a-form-item
            label="登录账号"
            field="userName"
            asterisk-position="end"
            :rules="[
              { required: true, message: '登录账号不能为空' },
              { minLength: 1, maxLength: 15, message: '登录账号必须小于15个字符' },
            ]"
            :validate-trigger="['change', 'input']"
          >
            <a-input
              v-model.trim="subFormEdit.userName"
              placeholder="请输入客户登录账号"
              allow-clear
            />
          </a-form-item>

          <a-form-item field="remarks" label="备注">
            <a-input
              hide-button
              v-model="subFormEdit.remarks"
              placeholder="请输入备注"
              allow-clear
            />
          </a-form-item>
          <a-divider dashed>其他设置</a-divider>
          <a-form-item field="phone" label="手机号码">
            <a-input
              hide-button
              v-model="subFormEdit.phone"
              placeholder="请输入客户手机号码"
              allow-clear
            />
            <template #extra>
              <div>客户的手机号码，填写后将会给客户绑定手机号</div>
            </template>
          </a-form-item>
          <a-form-item field="email" label="邮箱号码">
            <a-input
              hide-button
              v-model="subFormEdit.email"
              placeholder="请输入客户邮箱号码"
              allow-clear
            />
            <template #extra>
              <div>客户的邮箱号码，填写后将会给客户绑定邮箱号码</div>
            </template>
          </a-form-item>
          <a-form-item field="warningBalance" label="余额预警">
            <a-input
              hide-button
              v-model="subFormEdit.warningBalance"
              placeholder="请输入预警余额"
              :validate-trigger="['change', 'input']"
              allow-clear
            />
            <template #extra>
              <div>填写预警金额后，将会开启余额预警，客户余额低于闻值，将会发送提醒</div>
            </template>
          </a-form-item>
          <!-- <a-tab-pane key="2" title="权限设置">
              <a-form-item field="api" label="接口对接">
                <a-radio-group v-model="subFormEdit.api">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="batchRecharge" label="批量充值">
                <a-radio-group v-model="subFormEdit.batchRecharge">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="collection" label="代理收款">
                <a-radio-group v-model="subFormEdit.collection">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="cardOperation" label="停机复机">
                <a-radio-group v-model="subFormEdit.cardOperation">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="cardLogin" label="卡号登录">
                <a-radio-group v-model="subFormEdit.cardLogin">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="customSetRealName" label="套餐修改">
                <a-radio-group v-model="subFormEdit.customSetRealName">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item field="customLogo" label="自定义logo">
                <a-radio-group v-model="subFormEdit.customLogo">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">开启</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div>
                        </div>
                        <div className="custom-radio-card-title">关闭</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-tab-pane> -->
        </a-form>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelEdit">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkEdit">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 充值余额 -->
    <a-modal
      v-model:visible="balancevisible"
      @before-close="handleCancelBan"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <template #title>
        充值余额 - <span style="color: #3491fa; margin-left: 5px">{{ subFormEdit.userName }}</span>
      </template>
      <a-form ref="balanceForms" :auto-label-width="true" :model="banlanceForm">
        <a-form-item field="type" label="充值类型">
          <a-radio-group v-model="banlanceForm.type" class="radio-bcg">
            <a-radio value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">加款</div>
                </div>
              </template>
            </a-radio>
            <a-radio value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">扣款</div>
                </div>
              </template>
            </a-radio>
            <a-radio value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">最终金额</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          field="balance"
          label="充值金额"
          asterisk-position="end"
          :rules="[{ required: true, message: '充值金额不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number v-model="banlanceForm.balance" placeholder="输入充值金额" allow-clear />
        </a-form-item>
        <a-form-item field="remarks" label="备注" asterisk-position="end">
          <a-textarea v-model="banlanceForm.remarks" placeholder="请输入备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelBan">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBan">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 编辑分润 -->
    <a-modal
      v-model:visible="updateFenrunisible"
      @before-close="handleCancelUpdateFenrun"
      title="编辑分润"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="updateFenrunForms" :auto-label-width="true" :model="fenrunUpdateForm">
        <a-form-item field="name" label="套餐名称">
          <a-input
            v-model="fenrunUpdateForm.name"
            placeholder="请输入套餐名称（不填写不自定义名称）"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          field="cost"
          label="客户成本"
          asterisk-position="end"
          :rules="[{ required: true, message: '客户成本不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number
            v-model="fenrunUpdateForm.cost"
            placeholder="请输入客户成本"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          field="price"
          label="客户售价"
          asterisk-position="end"
          :rules="[{ required: true, message: '客户售价不能为空' }]"
        >
          <a-input-number
            v-model="fenrunUpdateForm.price"
            placeholder="请输入客户售价"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="close" label="套餐状态">
          <a-radio-group class="radio-bcg" v-model="fenrunUpdateForm.close">
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelUpdateFenrun">取消</a-button>
          <a-button type="primary" @click="submitUpdateFenrun">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 修改密码 -->
    <a-modal
      v-model:visible="passvisible"
      @before-close="handleCancelPass"
      title="修改密码"
      width="620px"
      :mask-closable="false"
      title-align="start"
    >
      <a-alert :show-icon="false" style="margin-bottom: 10px; background-color: #e8f7ff">
        <span style="color: #3491fa">
          修改完成后，系统会帮您复制密码，并拼接话术：您的新密码：XXXX，可直接发给客户
        </span>
      </a-alert>
      <a-form ref="passForms" :auto-label-width="true" :model="passForm">
        <a-form-item field="passWord" label="客户账号">
          <div class="radio-bcg">{{ subFormEdit.userName }}</div>
        </a-form-item>
        <a-form-item
          field="passWordmd5"
          label="新密码"
          :rules="[{ required: true, message: '新密码不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model="passForm.passWordmd5" placeholder="请输入新密码" allow-clear>
            <template #suffix>
              <span @click="clickSjs" style="color: rgb(var(--primary-6)); cursor: pointer"
                >随机密码</span
              >
            </template>
          </a-input>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelPass">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkPass">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 修改状态 -->
    <a-modal
      v-model:visible="statevisible"
      @before-close="handleCancelstate"
      title="修改状态"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="stateRef" :auto-label-width="true" :model="stateForm">
        <a-form-item field="state" label="用户状态">
          <a-radio-group class="radio-bcg" v-model="stateForm.state">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">正常</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="stateForm.state == 1" field="stateRemarks" label="关闭原因">
          <a-input v-model="stateForm.stateRemarks" placeholder="请输入关闭原因" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelstate">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkstate">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 在线设备 -->
    <a-modal
      v-model:visible="shebeivisible"
      @before-close="handleCancelsb"
      title="在线设备"
      width="1200px"
      :mask-closable="false"
      title-align="start"
    >
      <a-table
        :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)"
        :row-class-name="rowClassNameFun"
        :data="sessionList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        table-layout-fixed
        :tooltip="true"
      >
        <template #columns>
          <a-table-column
            v-for="item of sessionColumns"
            :key="item.key"
            align="left"
            :ellipsis="true"
            :tooltip="true"
            :width="item.width"
            :title="(item.title as string)"
            :data-index="(item.key as string)"
          >
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button
                  style="margin-right: 5px; padding: 0px"
                  type="text"
                  status="danger"
                  @click="ouLine(record)"
                  size="small"
                >
                  下线
                </a-button>
              </a-space>
            </template>
            <template v-else-if="item.key === 'status'" #cell="{ record }">
              <a-tag color="blue" size="small" v-if="record.state === 0">正常</a-tag>
              <a-tag color="red" size="small" v-else-if="record.state === 1">关闭</a-tag>
              <!-- <a-tag color="red" size="small" v-else>离职</a-tag> -->
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space>
          <!-- <a-button @click="handleCancelsb">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBansb">确定</a-button> -->
        </a-space>
      </template>
    </a-modal>
    <!-- 分销操作 -->
    <a-modal
      v-model:visible="huakavisible"
      @before-close="handleCancelhuaka"
      title="分销操作"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="huakaForms" :model="huakaForm" :auto-label-width="true">
        <a-form-item label="分销卡号" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                asterisk-position="end"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
              >
                <a-input
                  v-model="huakaForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                asterisk-position="end"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
              >
                <a-input
                  v-model="huakaForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          asterisk-position="end"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="huakaForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="分销备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input v-model="huakaForm.remarks" placeholder="请输入分销备注" allow-clear />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <a-divider type="dashed" :margin="20">常见问题</a-divider>
      <a-collapse>
        <a-collapse-item header="为什么会有不可分销卡号，具体是什么意思？" key="1">
          <div>1：不可分销卡号指的卡号是已经分销给下级客户 </div>
          <div>2：解决方法：将不可分销的卡号进行回收操作，再次分销就可以分销了</div>
        </a-collapse-item>
      </a-collapse>
      <template #footer>
        <a-space>
          <a-button @click="handleBeforeOkhuakas">检测</a-button>
          <a-button type="primary" @click="handleBeforeOkhuaka">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 检测结果 -->
    <a-modal
      v-model:visible="jiancevisible"
      @before-close="jiancevisible = false"
      title="检测结果"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <p style="text-align: center; font-size: 16px">分销卡号数据： </p>
      <p style="text-align: center; margin-top: 20px; font-size: 16px"
        >总分销卡号：<span style="color: #3491fa">{{ jianceForm.total }}张</span>，可分销卡号：<span
          style="color: #3491fa"
          >{{ jianceForm.success }}张</span
        >，不可分销卡号：<span style="color: #3491fa">{{ jianceForm.error }}张</span></p
      >
    </a-modal>
    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="colse"
      title="多条件搜索"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea v-model="card" placeholder="请输入搜索条件，一行一个" allow-clear />
      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 检测结果 -->
    <a-modal
      v-model:visible="aaaas"
      @before-close="aaaas = false"
      title="检测结果"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <p style="text-align: center; font-size: 16px">新建账户数据： </p>
      <p style="text-align: center; margin-top: 20px; font-size: 16px"
        >总数量：<span style="color: #3491fa">{{ userZong.total }}张</span>，可新建数量：<span
          style="color: #3491fa"
          >{{ userZong.success }}个</span
        >，不可新建数量：<span style="color: #3491fa">{{ userZong.error }}个</span></p
      >
      <a-alert style="margin-top: 20px" type="error" :show-icon="false">
        <div style="text-align: center; font-size: 13px; color: #f53f3f">
          不可新建的账号是因为账号重复，请仔细检查账号</div
        >
      </a-alert>
    </a-modal>
    <!-- 客户详情 -->
    <a-drawer
      v-model:visible="ziliaoVisible"
      title="客户详情"
      width="1000px"
      @before-close="handleCancelZiliao"
      :mask-closable="false"
      title-align="start"
      :footer="false"
    >
      <div class="padding20">
        <div class="box">
          <div class="line"></div>
          <div class="text">基本信息 </div>
        </div>
      </div>
      <a-row class="padding20">
        <a-col :span="12">
          <div class="display-box">
            <a-avatar :size="70">
              <img
                alt="avatar"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
            /></a-avatar>
            <div class="display-right">
              <div class="text-name">账号：{{ userInfos.obj.userName }}</div>
              <div class="text">账号ID：{{ userInfos.obj.id }}</div>
              <div class="text">创建时间：{{ userInfos.obj.createTime }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div style="float: right">
            <div>
              <a-space style="float: right">
                <a-button class="width75px" size="small" @click="previousFn"> 上一个</a-button>
                <a-button class="width75px" size="small" @click="nextFn"> 下一个 </a-button>
                <a-button
                  class="width75px"
                  type="primary"
                  status="warning"
                  size="small"
                  @click="showfenrun(userInfos.obj)"
                  >分润</a-button
                >
                <a-button
                  class="width75px"
                  type="primary"
                  size="small"
                  @click="delimitation(userInfos.obj)"
                  >划卡</a-button
                >
              </a-space>
            </div>
            <div class="white" style="margin-top: 14px; float: right">
              <a-space>
                <a-button size="small" class="width75px" @click="setBan(userInfos.obj)"
                  >权限设置</a-button
                >
                <a-button size="small" class="width75px" @click="gotoUser(userInfos.obj)"
                  >登陆账号</a-button
                >
                <a-button size="small" class="width75px" @click="balancePlay(userInfos.obj)"
                  >充值余额</a-button
                >
                <a-button size="small" class="width75px" @click="changePassWord(userInfos.obj)"
                  >修改密码</a-button
                >
                <a-button size="small" class="width75px" @click="trawUsers(userInfos.obj)"
                  >解冻账号</a-button
                >
                <a-button size="small" class="width75px" @click="onDeleteItem(userInfos.obj)"
                  >删除账号</a-button
                >
              </a-space>
            </div>
          </div>
        </a-col>
      </a-row>
      <div
        style="
          margin-top: 20px;
          border-top: 1px solid #f2f3f5;
          border-bottom: 1px solid #f2f3f5;
          padding: 20px 0;
        "
      >
        <a-grid :cols="6" :colGap="12" :rowGap="16" class="grid-demo-grid padding20">
          <a-grid-item class="demo-item">
            <div class="text-name">代理等级</div>
            <div class="text-info"> {{ userInfos.obj.grade }}级代理</div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">上级代理</div>
            <div class="text-info">
              <span v-if="userInfos.obj.parent.length > 1">
                {{ userInfos.obj.parent[userInfos.obj.parent.length - 2].userName }}
              </span>
              <span v-else>系统</span>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">账户实名</div>
            <div class="text-info">
              <a-tag color="blue" v-if="userInfos.obj.realName === 0">已实名 </a-tag>
              <a-tag v-else-if="userInfos.obj.realName == 1">待审核 </a-tag>
              <a-tag color="red" v-else-if="userInfos.obj.realName == 2">已失败 </a-tag>
              <a-tag color="red" v-else-if="userInfos.obj.realName == 3">已驳回 </a-tag>
              <a-tag v-else>未实名 </a-tag></div
            >
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">接口对接</div>
            <div class="text-info">
              <a-tag color="blue" size="small" v-show="userInfos.obj.api == true">开启</a-tag>
              <a-tag color="red" size="small" v-show="userInfos.obj.api == false">关闭</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name"> 代理收款</div>
            <div class="text-info">
              <a-tag color="blue" size="small" v-show="userInfos.obj.collection == true"
                >开启</a-tag
              >
              <a-tag color="red" size="small" v-show="userInfos.obj.collection == false"
                >关闭</a-tag
              ></div
            >
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">账户余额</div>
            <div class="text-info">{{ userInfos.obj.balance }} 元</div>
          </a-grid-item>
        </a-grid>
      </div>
      <div class="tabs-button padding20">
        <a-radio-group style="width: 100%" v-model="activeBatch" type="button">
          <a-radio value="user">客户详情</a-radio>
          <a-radio value="below">下级代理</a-radio>
          <a-radio value="capital" @click="doRefresh55(1)">资金明细</a-radio>
          <a-radio value="commission" @click="doRefresh66(1)">佣金详情</a-radio>
          <a-radio value="Withdrawal" @click="doRefreshTiXian(1)">提现记录</a-radio>
          <a-radio value="login" @click="doRefreshLogin(1)">登录日志</a-radio>
        </a-radio-group>
      </div>
      <div v-if="activeBatch == 'user'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">客户信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12">
            余额预警：<a-tag color="blue" size="small" v-show="userInfos.obj.warningPhone"
              >开启</a-tag
            >
            <a-tag color="red" size="small" v-show="!userInfos.obj.warningPhone">关闭</a-tag>
          </a-col>
          <a-col :span="12">
            批量充值：<a-tag color="blue" size="small" v-show="userInfos.obj.batchRecharge == true"
              >开启</a-tag
            >
            <a-tag color="red" size="small" v-show="userInfos.obj.batchRecharge == false"
              >关闭</a-tag
            >
          </a-col>

          <a-col :span="12">
            停机复机：<a-tag color="blue" size="small" v-show="userInfos.obj.cardOperation == true"
              >开启</a-tag
            >
            <a-tag color="red" size="small" v-show="userInfos.obj.cardOperation == false"
              >关闭</a-tag
            >
          </a-col>
          <a-col :span="12">
            卡号登录：<a-tag color="blue" size="small" v-show="userInfos.obj.cardLogin == true"
              >开启</a-tag
            >
            <a-tag color="red" size="small" v-show="userInfos.obj.cardLogin == false">关闭</a-tag>
          </a-col>
          <a-col :span="12">
            账户状态：<a-tag color="blue" size="small" v-show="userInfos.obj.state == 0"
              >正常</a-tag
            >
            <a-tag color="red" size="small" v-show="userInfos.obj.state !== 0">关闭</a-tag>
          </a-col>
          <a-col :span="12" v-if="userInfos.obj.state !== 0">
            关闭原因：{{ userInfos.obj.stateRemarks }}
          </a-col>
          <a-col :span="12"> 首次登录：{{ userInfos.obj.firstLoginTime }} </a-col>
          <a-col :span="12"> 最近登录：{{ userInfos.obj.lastLoginTime }} </a-col>
          <a-col :span="12"> 备注：{{ userInfos.obj.remarks }} </a-col>
        </a-row>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">对接信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12"> 接口账号：{{ userInfos.obj.id }} </a-col>
          <a-col :span="12">
            接口密钥：{{ userInfos.obj.key ? userInfos.obj.key : '暂未设置接口密钥' }}
            <span class="copys" style="margin-right: 10px" @click="keys">{{
              userInfos.obj.key ? '重置' : '设置'
            }}</span>
            <span class="copys" v-show="userInfos.obj.key" @click="copy(userInfos.obj.key)"
              >复制</span
            >
          </a-col>
          <a-col :span="12">
            接口地址：{{ userInfos.obj.urls }}
            <span class="copys" v-show="userInfos.obj.urls" @click="copy(userInfos.obj.urls)"
              >复制</span
            ></a-col
          >
          <a-col :span="12"> 接口卡号：调接口卡号请使用ICCID进行调用 </a-col>
          <a-col :span="12" style="word-break: break-all; word-wrap: break-word">
            接口文档：https://console-docs.apipost.cn/preview/a240bd8990b57e04/989cac2e089153b8
            <span
              class="copys"
              @click="
                copy('https://console-docs.apipost.cn/preview/a240bd8990b57e04/989cac2e089153b8')
              "
              >复制</span
            >
          </a-col>
          <a-col :span="12"> 套餐编码：代理后台，在套餐列表，第一列就是套餐编码 </a-col>
        </a-row>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">实名信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12">
            实名类型：<span v-if="userInfos.obj.userRealName">
              <span v-if="userInfos.obj.userRealName.type == 0">个人实名</span>
              <span v-if="userInfos.obj.userRealName.type == 1">个体实名</span>
              <span v-if="userInfos.obj.userRealName.type == 2">企业实名</span>
            </span>
          </a-col>
          <a-col :span="12">
            姓名：{{ userInfos.obj.userRealName ? userInfos.obj.userRealName.name : '' }}
          </a-col>
          <a-col :span="12">
            手机号码：{{ userInfos.obj.userRealName ? userInfos.obj.userRealName.phone : '' }}
          </a-col>
          <a-col :span="12">
            身份证号：{{
              userInfos.obj.userRealName ? userInfos.obj.userRealName.identityCard : ''
            }}</a-col
          >
          <a-col :span="12">
            证件照片：
            <a-image
              v-if="userInfos.obj.userRealName && userInfos.obj.userRealName.identityCardImageBack"
              class="img"
              :src="
                urla +
                '/app/file/download/private?path=' +
                encodeURIComponent(userInfos.obj.userRealName.identityCardImageBack)
              "
            />

            <a-image
              v-if="userInfos.obj.userRealName && userInfos.obj.userRealName.identityCardImageHand"
              class="imgs"
              :src="
                urla +
                '/app/file/download/private?path=' +
                encodeURIComponent(userInfos.obj.userRealName.identityCardImageHand)
              "
            />

            <a-image
              v-if="userInfos.obj.userRealName && userInfos.obj.userRealName.identityCardImageJust"
              class="imgs"
              :src="
                urla +
                '/app/file/download/private?path=' +
                encodeURIComponent(userInfos.obj.userRealName.identityCardImageJust)
              "
            />
          </a-col>
          <a-col :span="12">
            其他材料：
            <a-image
              v-if="userInfos.obj.userRealName && userInfos.obj.userRealName.other"
              class="img"
              :src="
                urla +
                '/app/file/download/private?path=' +
                encodeURIComponent(userInfos.obj.userRealName.other)
              "
            />
          </a-col>
          <a-col :span="12">
            执照照片：
            <a-image
              v-if="userInfos.obj.userRealName && userInfos.obj.userRealName.businessIcense"
              class="img"
              :src="
                urla +
                '/app/file/download/private?path=' +
                encodeURIComponent(userInfos.obj.userRealName.businessIcense)
              "
            />
          </a-col>
        </a-row>
      </div>
      <div v-if="activeBatch == 'below'" class="col-div">
        <div
          style="
            line-height: 36px;
            background-color: #f2f3f5;
            padding-left: 20px;
            margin-bottom: 20px;
            box-sizing: border-box;
          "
        >
          代理层级：<span v-if="userInfos.obj.parent.length > 0">
            系统
            <span v-for="item in userInfos.obj.parent" :key="item.id" style="margin-right: 5px">
              → {{ item.userName }}
            </span></span
          >
          <span v-else>---</span>
        </div>
        <a-tree
          v-if="userInfos.obj.children.length > 0"
          blockNode
          :show-line="true"
          :data="userInfos.obj.children"
          :default-expand-all="false"
          :field-names="{ key: 'id', title: 'userName' }"
        >
          <template #switcher-icon="node, { isLeaf }">
            <IconDown v-if="!isLeaf" />
            <component v-if="isLeaf" is="i-user" strokeWidth="2" />
          </template>
        </a-tree>
      </div>
      <div v-if="activeBatch == 'capital'" class="col-div">
        <a-row :gutter="20">
          <a-col :span="6">
            <a-input
              style="width: 100%"
              @change="doRefresh55(1)"
              v-model="form55.id"
              placeholder="请输入交易ID"
              allow-clear
            />
          </a-col>
          <a-col :span="6">
            <a-select v-model="form55.type" placeholder="请选择账单类型" allow-clear allow-search>
              <a-option v-for="(item, index) in typeListBalence" :key="index" :value="item.type">{{
                item.message
              }}</a-option>
            </a-select></a-col
          >
          <a-col :span="6">
            <a-date-picker
              v-model="form55.addTime"
              show-time
              class="width100"
              allow-clear
              @change="doRefresh55(1)"
              placeholder="请选择创建开始时间"
              :time-picker-props="{ defaultValue: '12:00:00' }"
              format="YYYY-MM-DD HH:mm:ss"
              :shortcuts="[
                {
                  label: '今日',
                  value: () => (
                    (form55.addTime = $dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')),
                    (form55.endTime = $dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '昨日',
                  value: () => (
                    (form55.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form55.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '七日',
                  value: () => (
                    (form55.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(7, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form55.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '本月',
                  value: () => (
                    (form55.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    )),
                    (form55.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '上月',
                  value: () => (
                    (form55.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                      .subtract(1, 'month')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form55.endTime = $dayjs()
                      .subtract(1, 'month')
                      .endOf('month')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
              ]"
            />
          </a-col>
          <a-col :span="6">
            <a-date-picker
              class="width100"
              v-model="form55.endTime"
              show-time
              allow-clear
              @change="doRefresh55(1)"
              placeholder="请选择创建结束时间"
              :time-picker-props="{ defaultValue: '12:00:00' }"
              :shortcuts="[
                {
                  label: '今日',
                  value: () => (
                    (form55.addTime = $dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')),
                    (form55.endTime = $dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '昨日',
                  value: () => (
                    (form55.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form55.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '七日',
                  value: () => (
                    (form55.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(7, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form55.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '本月',
                  value: () => (
                    (form55.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    )),
                    (form55.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '上月',
                  value: () => (
                    (form55.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                      .subtract(1, 'month')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form55.endTime = $dayjs()
                      .subtract(1, 'month')
                      .endOf('month')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
              ]"
            />
          </a-col>
        </a-row>
        <a-table
          :bordered="{ wrapper: tables.bordered, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="tableLoadings"
          :data="data55"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="tableColumns55.list"
          table-layout-fixed
          hide-expand-button-on-empty
          :default-expand-all-rows="true"
          :scroll="{ x: 1500 }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns55.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'remarks'" #cell="{ record }">
                <span v-if="record.remarks">{{ record.remarks }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'add'" #cell="{ record }">
                <a-tag color="blue" v-if="record.add === true">增加</a-tag>
                <a-tag color="red" v-else-if="record.add === false">减少</a-tag>
              </template>
              <template v-else-if="item.key === 'type'" #cell="{ record }">
                <span
                  v-for="(items, index) in typeListBalence"
                  :key="index"
                  v-show="items.type == record.type"
                  >{{ items.message }}</span
                >
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination55" />
      </div>
      <div v-if="activeBatch == 'commission'" class="col-div">
        <a-row :gutter="20">
          <a-col :span="6">
            <a-select
              v-model="form66.states"
              @change="doRefresh66(1)"
              placeholder="请选择返佣状态"
              allow-clear
            >
              <a-option :value="0">等待返佣</a-option>
              <a-option :value="1">返佣成功</a-option>
              <a-option :value="2">返佣收回</a-option>
              <a-option :value="3">回收失败</a-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <a-date-picker
              v-model="form66.addTime"
              show-time
              class="width100"
              allow-clear
              @change="doRefresh66(1)"
              placeholder="请选择创建开始时间"
              :time-picker-props="{ defaultValue: '12:00:00' }"
              format="YYYY-MM-DD HH:mm:ss"
              :shortcuts="[
                {
                  label: '今日',
                  value: () => (
                    (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')),
                    (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '昨日',
                  value: () => (
                    (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '七日',
                  value: () => (
                    (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(7, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '本月',
                  value: () => (
                    (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    )),
                    (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '上月',
                  value: () => (
                    (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                      .subtract(1, 'month')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form.endTime = $dayjs()
                      .subtract(1, 'month')
                      .endOf('month')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
              ]"
            />
          </a-col>
          <a-col :span="6">
            <a-date-picker
              class="width100"
              v-model="form66.endTime"
              show-time
              allow-clear
              @change="doRefresh66(1)"
              placeholder="请选择创建结束时间"
              :time-picker-props="{ defaultValue: '12:00:00' }"
              :shortcuts="[
                {
                  label: '今日',
                  value: () => (
                    (form66.addTime = $dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')),
                    (form66.endTime = $dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '昨日',
                  value: () => (
                    (form66.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form66.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '七日',
                  value: () => (
                    (form66.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(7, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form66.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '本月',
                  value: () => (
                    (form66.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    )),
                    (form66.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '上月',
                  value: () => (
                    (form66.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                      .subtract(1, 'month')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (form66.endTime = $dayjs()
                      .subtract(1, 'month')
                      .endOf('month')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
              ]"
            />
          </a-col>
        </a-row>
        <a-table
          :bordered="{ wrapper: tables.bordered, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="tableLoadings"
          :data="data66"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="tableColumns66.list"
          table-layout-fixed
          hide-expand-button-on-empty
          :default-expand-all-rows="true"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          :scroll="{ x: 1500 }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns66.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'userName'" #cell="{ record }">
                {{ record.user.userName }}
              </template>
              <template v-if="item.key === 'card'" #cell="{ record }">
                {{ record.card.card }}
              </template>
              <template v-if="item.key === 'setMealName'" #cell="{ record }">
                {{ record.order.setMealName }}
              </template>
              <template v-if="item.key === 'addTime'" #cell="{ record }">
                {{ record.order.createTime }}
              </template>
              <template v-else-if="item.key === 'state'" #cell="{ record }">
                <a-tag v-if="record.state === 0">等待返佣</a-tag>
                <a-tag color="blue" v-if="record.state === 1">返佣成功</a-tag>
                <a-tag color="red" v-else-if="record.state === 2">返佣收回</a-tag>
                <a-tag color="red" v-else-if="record.state === 3">回收失败</a-tag>
              </template>
              <template v-else-if="item.key === 'action'" #cell="{ record }">
                <a-button v-permission="rebaterecovery" type="text" @click="onDeleteItem66(record)"
                  >收回佣金</a-button
                >
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination66" />
      </div>
      <div v-if="activeBatch == 'Withdrawal'" class="col-div">
        <a-row :gutter="20">
          <a-col :span="6">
            <a-input-group>
              <a-select
                style="width: 50%"
                @change="changeType77"
                v-model="type77"
                placeholder="first"
              >
                <a-option v-for="item in typeLists77" :key="item.name" :value="item.value">{{
                  item.name
                }}</a-option>
              </a-select>
              <a-input
                style="width: 50%"
                @change="doRefreshTiXian(1)"
                v-model="typeText77"
                placeholder="请输入搜索条件"
              />
            </a-input-group>
          </a-col>
          <a-col :span="6">
            <a-select
              v-model="tiXianForm.type"
              @change="doRefreshTiXian(1)"
              placeholder="请选择提现途径"
              allow-clear
            >
              <a-option :value="0">支付宝</a-option>
              <a-option :value="1">微信</a-option>
              <a-option :value="2">银行卡</a-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <a-select
              v-model="tiXianForm.state"
              @change="doRefreshTiXian(1)"
              placeholder="请选择提现状态"
              allow-clear
            >
              <a-option :value="0">等待审核</a-option>
              <a-option :value="1">正在审核</a-option>
              <a-option :value="2">审核通过</a-option>
              <a-option :value="3">审核驳回</a-option>
            </a-select>
          </a-col>
        </a-row>
        <a-table
          :loading="tables.tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="tiXianList"
          :pagination="false"
          :row-key="rowKey"
          :scroll="{ x: 1000 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns1.list1"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'amount'" #cell="{ record }">
                <span> {{ record.amount }}</span>
              </template>
              <template v-if="item.key === 'type'" #cell="{ record }">
                <span v-if="record.type == 0">支付宝</span>
                <span v-if="record.type == 1">微信</span>
                <span v-if="record.type == 2">银行卡</span>
              </template>
              <template v-else-if="item.key === 'other'" #cell="{ record }">
                <span v-if="record.type == 2">{{ record.information }}</span>
                <a-image
                  v-else-if="record.information && record.show == true"
                  style="width: 20px; height: 100%"
                  :src="
                    urla +
                    '/app/file/download/private?path=' +
                    encodeURIComponent(record.information)
                  "
                />
                <a-image
                  v-else-if="record.information"
                  style="width: 20px; height: 100%"
                  :src="record.information"
                />
                <span v-else>- - -</span>
              </template>
              <template v-else-if="item.key === 'state'" #cell="{ record }">
                <a-tag v-if="record.state === 0">等待审核</a-tag>
                <a-tag color="gold" v-else-if="record.state === 1">正在审核</a-tag>
                <a-tag color="blue" v-if="record.state === 2">通过审核</a-tag>
                <a-tag color="red" v-else-if="record.state === 3">审核驳回</a-tag>
              </template>
              <template v-else-if="item.key === 'payTemplateId'" #cell="{ record }">
                <span v-if="!record.handlerTime">---</span>
                <span v-else>
                  <span v-if="record.payTemplateId">自动打款</span>
                  <span v-else>手动打款</span>
                </span>
              </template>
              <template v-else-if="item.key === 'userRemarks'" #cell="{ record }">
                <span v-if="record.userRemarks">{{ record.userRemarks }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'handlerTime'" #cell="{ record }">
                <span v-if="record.handlerTime">{{ record.handlerTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'adminRemarks'" #cell="{ record }">
                <span v-if="record.adminRemarks">{{ record.adminRemarks }}</span>
                <span v-else>---</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationTiXian" />
      </div>
      <div v-if="activeBatch == 'login'" class="col-div">
        <a-row :gutter="20">
          <a-col :span="6">
            <a-input
              style="width: 100%"
              @change="doRefreshLogin(1)"
              v-model="loginForm.ip"
              placeholder="请输入操作ip"
              allow-clear
            />
          </a-col>
          <a-col :span="6">
            <a-select
              @change="doRefreshLogin(1)"
              style="width: 100%"
              v-model="loginForm.success"
              placeholder="请选择操作状态"
              allow-clear
            >
              <a-option :value="1">成功</a-option>
              <a-option :value="0">失败</a-option>
            </a-select></a-col
          >
          <a-col :span="6">
            <a-date-picker
              v-model="loginForm.addTime"
              show-time
              class="width100"
              allow-clear
              @change="doRefreshLogin(1)"
              placeholder="请选择操作开始时间"
              :time-picker-props="{ defaultValue: '12:00:00' }"
              format="YYYY-MM-DD HH:mm:ss"
              :shortcuts="[
                {
                  label: '今日',
                  value: () => (
                    (loginForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    )),
                    (loginForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    ))
                  ),
                },
                {
                  label: '昨日',
                  value: () => (
                    (loginForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (loginForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '七日',
                  value: () => (
                    (loginForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(7, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (loginForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '本月',
                  value: () => (
                    (loginForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    )),
                    (loginForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '上月',
                  value: () => (
                    (loginForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                      .subtract(1, 'month')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (loginForm.endTime = $dayjs()
                      .subtract(1, 'month')
                      .endOf('month')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
              ]"
            />
          </a-col>
          <a-col :span="6">
            <a-date-picker
              class="width100"
              v-model="loginForm.endTime"
              show-time
              allow-clear
              @change="doRefreshLogin(1)"
              placeholder="请选择操作结束时间"
              :time-picker-props="{ defaultValue: '12:00:00' }"
              :shortcuts="[
                {
                  label: '今日',
                  value: () => (
                    (loginForm.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    )),
                    (loginForm.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    ))
                  ),
                },
                {
                  label: '昨日',
                  value: () => (
                    (loginForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (loginForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '七日',
                  value: () => (
                    (loginForm.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                      .subtract(7, 'day')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (loginForm.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                      .subtract(1, 'day')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '本月',
                  value: () => (
                    (loginForm.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                      'YYYY-MM-DD HH:mm:ss'
                    )),
                    (loginForm.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
                {
                  label: '上月',
                  value: () => (
                    (loginForm.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                      .subtract(1, 'month')
                      .format('YYYY-MM-DD HH:mm:ss')),
                    (loginForm.endTime = $dayjs()
                      .subtract(1, 'month')
                      .endOf('month')
                      .format('YYYY-MM-DD HH:mm:ss'))
                  ),
                },
              ]"
            />
          </a-col>
        </a-row>
        <a-table
          :loading="tables.tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="loginList"
          :pagination="false"
          :row-key="rowKey"
          :scroll="{ x: 1000 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns1.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-space>
                  <a-button
                    v-if="record.error"
                    type="text"
                    status="danger"
                    @click="handleClickInfo(record.error)"
                    >失败</a-button
                  >
                  <a-button v-else type="text">成功</a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationLogin" />
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-drawer>
    <!-- 代理版权 -->
    <a-modal
      v-model:visible="copyrightVisibles"
      @before-close="handleCancelCopyright"
      title="代理版权"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="copyrightRef" :auto-label-width="true" :model="copyrightInfo">
        <a-form-item
          v-if="!copyrightInfo.id"
          style="width: 100%"
          label="代理域名"
          field="host"
          asterisk-position="end"
          :rules="[{ required: true, message: '代理域名不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-textarea
            v-model="copyrightInfo.host"
            placeholder="请输入代理域名，一行一个"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          v-else
          style="width: 100%"
          label="代理域名"
          field="host"
          asterisk-position="end"
          :rules="[{ required: true, message: '代理域名不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="copyrightInfo.host" placeholder="代理域名" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelCopyright">取消</a-button>
          <a-button type="primary" @click="handleBeforeCopyright">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 代理版权 -->
    <a-modal
      v-model:visible="copyrightVisible"
      @before-close="copyrightVisible = false"
      title="代理版权"
      width="637px"
      :mask-closable="false"
      title-align="start"
      :footer="false"
    >
      <a-space :size="15" style="margin-bottom: 20px">
        <a-button type="primary" @click="addCopyright">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建</template>
        </a-button>
      </a-space>

      <a-table
        :loading="classLoading"
        :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)"
        :row-class-name="rowClassNameFun"
        :data="classList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        table-layout-fixed
      >
        <template #columns>
          <a-table-column
            v-for="item of classTableList"
            :key="item.key"
            align="left"
            :width="item.width"
            :title="(item.title as string)"
            :data-index="(item.key as string)"
            :ellipsis="true"
            :tooltip="true"
          >
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button
                  class="list-button"
                  type="text"
                  size="small"
                  @click="openUpdateClass(record)"
                  >编辑</a-button
                >
                <a-button
                  class="list-button"
                  type="text"
                  size="small"
                  status="warning"
                  @click="openDeleClass(record)"
                  >删除</a-button
                >
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-modal>
    <!-- 邀请码 -->
    <a-modal
      v-model:visible="invitationVisible"
      @before-close="handleCancelInvitation"
      title="邀请码"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="invitationRef" :auto-label-width="true" :model="invitationForm">
        <a-form-item
          field="code"
          label="邀请码"
          asterisk-position="end"
          :rules="[{ required: true, message: '邀请码不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="invitationForm.code" placeholder="请输入邀请码" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelInvitation">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkInvitation">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 商城分润 -->
    <a-modal
      v-model:visible="goodProfitVisible"
      @before-close="goodProfitVisible = false"
      title="分润列表"
      width="1100px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :auto-label-width="true" :model="goodProfitInfo">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item field="mallName" hide-label>
              <a-input
                v-model="goodProfitInfo.mallName"
                class="width100"
                placeholder="请输入商品名称"
                allow-clear
                @change="changeStockSeach"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="classId" hide-label>
              <a-select
                v-model="goodProfitInfo.classId"
                class="width100"
                placeholder="请选择商品分类"
                allow-clear
                @change="changeStockSeach"
              >
                <a-option v-for="item in classLists" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="profitSharing" hide-label>
              <a-select
                v-model="goodProfitInfo.profitSharing"
                placeholder="请选择分润状态"
                class="width100"
                allow-clear
                @change="changeStockSeach"
              >
                <a-option :value="1">已分润</a-option>
                <a-option :value="0">未分润</a-option>
                <!-- <a-option value="2">离职</a-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="operatorId" hide-label>
              <a-select
                class="width100"
                v-model="goodProfitInfo.operatorId"
                placeholder="请选择运营商"
                allow-clear
                @change="changeStockSeach"
              >
                <a-option :value="0">中国移动</a-option>
                <a-option :value="1">中国联通</a-option>
                <a-option :value="2">中国电信</a-option>
                <a-option :value="3">中国广电</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="commissionRule" hide-label>
              <a-select
                class="width100"
                v-model="goodProfitInfo.commissionRule"
                placeholder="请选择佣金规则"
                allow-clear
                @change="changeStockSeach"
              >
                <a-option :value="0">秒返</a-option>
                <a-option :value="1">次月底返</a-option>
                <a-option :value="2">月月返</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="channelId" hide-label>
              <a-select
                class="width100"
                v-model="goodProfitInfo.channelId"
                placeholder="请选择商品渠道"
                allow-clear
                @change="changeStockSeach"
              >
                <a-option v-for="item in channelList" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :loading="goodProfitLoading"
        :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)"
        :row-class-name="rowClassNameFun"
        :data="goodProfitList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        table-layout-fixed
        :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        :selected-keys="fuzhufenrunlist111"
        :row-selection="{
          type: 'checkbox',
          showCheckedAll: true,
        }"
        @selection-change="selecFn"
      >
        <template #columns>
          <a-table-column
            v-for="item of goodProfitTableList"
            :key="item.key"
            align="left"
            :width="item.width"
            :title="(item.title as string)"
            :data-index="(item.key as string)"
            :ellipsis="true"
            :tooltip="true"
            :fixed="item.fixed"
          >
            <template v-if="item.key === 'commissionRule'" #cell="{ record }">
              <a-space style="display: flex; flex-wrap: wrap">
                {{
                  record.commissionRule == 0
                    ? '秒返'
                    : record.commissionRule == 1
                    ? '次月底返'
                    : record.commissionRule == 2
                    ? '月月返'
                    : '- - -'
                }}
              </a-space>
            </template>
            <template v-if="item.key === 'mallCost'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ record.mallUser.cost }}
              </span>
              <span v-else> 未分润</span>
            </template>
            <template v-if="item.key === 'mallPrice'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ record.mallUser.price }}
              </span>
              <span v-else> 未分润</span>
            </template>
            <template v-if="item.key === 'mallProfit'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ Math.floor((record.mallUser.cost - record.cost) * 100) / 100 }} +
                {{ Math.floor((record.commission - record.mallUser.commission) * 100) / 100 }}
              </span>
              <span v-else>未分润</span>
            </template>
            <template v-if="item.key === 'commission1'" #cell="{ record }">
              <span>
                {{ record.commission }}
              </span>
            </template>
            <template v-if="item.key === 'commission'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ record.mallUser.commission }}
              </span>
              <span v-else> 未分润</span>
            </template>
            <template v-if="item.key === 'state'" #cell="{ record }">
              <span v-if="record.runState == 1" style="color: #3491fa"> 已分润 </span>
              <span v-else style="color: red"> 未分润</span>
            </template>
            <template v-if="item.key === 'name'" #cell="{ record }">
              <div style="display: flex">
                <a-image
                  style="width: 40px; height: 40px"
                  :src="reSetImage(record.img[0])"
                  fit="contain"
                  alt=""
                  :preview="false"
                  @click="openImg(record)"
                />
                <div
                  style="
                    margin-left: 10px;
                    width: 170px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  <div
                    style="
                      line-height: 20px;
                      font-size: 12px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                    >{{ record.name }}</div
                  >
                  <div
                    style="
                      color: #86909c;
                      line-height: 20px;
                      font-size: 10px;
                      width: 170px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                    >{{ record.shortIntroduce }}</div
                  >
                </div>
              </div>
            </template>
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <div style="width: 168px; display: flex; flex-wrap: wrap">
                <a-button class="list-button" type="text" size="small" @click="openProfit(record)"
                  >编辑</a-button
                >
                <a-button
                  class="list-button"
                  type="text"
                  size="small"
                  @click="onDeleteItemSB(record)"
                  >回收</a-button
                >
              </div>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter :pagination="paginationGoodProfit" position="center" />
      <template #footer>
        <div style="display: flex; justify-content: space-between; width: 100%">
          <div></div>
          <a-space>
            <a-select :style="{ width: '200px' }" v-model="profitType" allow-clear>
              <a-option :value="0">百分比分润</a-option>
              <a-option :value="1">金额分润</a-option>
            </a-select>
            <a-input-number
              hide-button
              :style="{ width: '320px' }"
              v-model="profitNum"
              placeholder="请输入分润比例"
              allow-clear
            >
              <template #append>
                <a-button type="primary" status="success" @click="mathProfit">辅助计算</a-button>
              </template>
            </a-input-number>
            <a-button type="primary" style="margin-left: 12px" @click="allProfit"
              >确认分润</a-button
            >
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 商品图片展示 -->
    <a-image-preview-group
      v-model:visible="imgShow"
      :default-current="0"
      infinite
      :srcList="imgArray"
    />
    <!-- 编辑分润 -->
    <a-modal
      v-model:visible="profitVisible"
      @before-close="handleCancelProfit"
      title="编辑分润"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="profitRef" :auto-label-width="true" :model="profitInfo">
        <a-form-item
          label="商品成本"
          field="cost"
          asterisk-position="end"
          :rules="[{ required: true, message: '商品成本不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number v-model="profitInfo.cost" placeholder="请输入商品成本" allow-clear />
        </a-form-item>
        <a-form-item
          label="商品售价"
          field="price"
          asterisk-position="end"
          :rules="[{ required: true, message: '商品售价不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number v-model="profitInfo.price" placeholder="请输入商品售价" allow-clear />
        </a-form-item>
        <a-form-item
          v-if="profitInfo.type != 2"
          field="commission"
          label="客户佣金"
          :rules="[{ required: true, message: '客户佣金不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number
            v-model="profitInfo.commission"
            placeholder="请输入客户佣金"
            allow-clear
          />
        </a-form-item>
        <div v-else>
          <a-form-item
            v-for="(item, index) in profitInfo.everyMonthCommission"
            :key="index"
            field="commission"
            :label="'第' + item.month + '月'"
          >
            <a-input-number v-model="item.commission" placeholder="请输入客户佣金" allow-clear />
          </a-form-item>
        </div>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelProfit">取消</a-button>
          <a-button type="primary" @click="handleBeforeProfit">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reSetImage } from '@/api/imageNiu'
  import useCommonStore from '@/store/modules/common'
  import * as http from '@/api/http'
  import { formpost, get, post } from '@/api/http'
  import {
    getFenrunReset,
    getUserList,
    getFenrunList,
    outLineUsers,
    postAddUser,
    postEditUser,
    getDelUser,
    userBalance,
    lookUserInfo,
    changePass,
    trawUser,
    changeUserState,
    exportUser,
    gotoUserUrl,
    postOrderly,
    postDisOrder,
    postOrderlyCheck,
    postDisOrderCheck,
    setFenrun,
    recovery,
    authority,
    userdetect,
    userStatistics,
    getUserHistor,
    getBillType,
    keyUser,
    withdrawalList,
    rebaterecovery,
  } from '@/api/url'
  import { loginUser } from '@/api/userUrl'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { onMounted, reactive, ref, watch, set } from 'vue'
  import md5 from 'js-md5'
  //展示图片
  const imgShow = ref(false)
  const imgArray: any = ref([])
  function openImg(val: any) {
    imgArray.value = JSON.parse(JSON.stringify(val.img))
    imgArray.value.forEach((item: any, index: any) => {
      imgArray.value[index] = reSetImage(item)
    })
    imgShow.value = true
  }
  //获取渠道
  const channelList: any = ref([])
  function channelListFn() {
    get({
      url: '/app/mall/channel/name/list',
    }).then((res: any) => {
      channelList.value = res.data
    })
  }
  //商品回收佣金
  const onDeleteItemSB = (item: any) => {
    Modal.warning({
      title: '操作提示',
      titleAlign: 'start',
      content: '确定要回收佣金？',
      hideCancel: false,
      onOk() {
        formpost({
          url: '/app/mall/recovery/profit/sharing',
          data: { mallIdList: item.id, userId: goodProfitInfo.value.userId },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            goodProfitFN()
          }
        })
      },
    })
  }
  function userdetectFn() {
    http
      .formpost({
        url: userdetect,
        data: () => {
          return { userName: subForm.userName }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          aaaas.value = true
          userZong.value = res.data
        }
      })
  }
  function changeStockSeach() {
    goodProfitFN(1)
  }
  const fuzhufenrunlist111 = ref([])
  function selecFn(val: any) {
    fuzhufenrunlist111.value = val
  }
  const profitType = ref(0)
  function calculateMonthlyCommission(commission: number, profitNum: number, profitType: number) {
    if (profitType === 0) {
      if (commission > 0) {
        return commission - Math.floor(commission * (profitNum / 100) * 100) / 100 > 0
          ? commission - Math.floor(commission * (profitNum / 100) * 100) / 100
          : 0
      } else {
        return 0
      }
    } else {
      if (commission > 0) {
        return Math.floor((commission - profitNum) * 100) / 100 > 0
          ? Math.floor((commission - profitNum) * 100) / 100
          : 0
      } else {
        return 0
      }
    }
  }

  // 计算总成本的函数
  function calculateTotalCost(cost: any, profitNum: number, profitType: number) {
    if (cost.price == 0) {
      return 0
    } else {
      if (profitType === 0) {
        return cost.price - Math.floor(cost.price * (profitNum / 100) * 100) / 100
      }
      return Math.floor((cost.cost + profitNum) * 100) / 100
    }
  }

  // 计算总佣金的函数
  function calculateTotalCommission(item: any, profitNum: number, profitType: number) {
    if (item.commissionRule === 2) {
      let total = 0
      item.everyMonthCommission.forEach((items: any) => {
        total += calculateMonthlyCommission(items.commission, profitNum, profitType)
      })
      return total
    }
    return calculateMonthlyCommission(item.commission, profitNum, profitType)
  }

  // 生成每月佣金列表的函数
  function generateMonthlyCommissionList(item: any, profitNum: number, profitType: number) {
    if (item.commissionRule === 2) {
      return item.everyMonthCommission.map((items: any) => ({
        month: items.month,
        commission: calculateMonthlyCommission(items.commission, profitNum, profitType),
      }))
    }
    return []
  }
  //辅助计算
  function mathProfit() {
    mathArray.value = []
    // 主逻辑循环
    goodProfitList.value.forEach((item: any) => {
      fuzhufenrunlist111.value.forEach((val: any) => {
        if (val === item.id) {
          const totalCost = calculateTotalCost(item, profitNum.value, profitType.value)
          const totalCommission = calculateTotalCommission(item, profitNum.value, profitType.value)
          const monthlyCommissionList = generateMonthlyCommissionList(
            item,
            profitNum.value,
            profitType.value
          )
          item.mallUser = {
            cost: totalCost,
            price: totalCost >= item.price ? totalCost : item.price,
            commission: totalCommission,
            everyMonthCommission: monthlyCommissionList,
            mallId: item.id,
          }
          mathArray.value.push(item.mallUser)
        }
      })
    })
  }
  //批量分润
  function allProfit() {
    if (fuzhufenrunlist111.value.length > 0) {
      const list: any = []
      fuzhufenrunlist111.value.forEach((val: any) => {
        mathArray.value.forEach((vals: any) => {
          if (val == vals.mallId) {
            list.push(vals)
          }
        })
      })
      console.log(list)
      post({
        url: '/app/mall/profit/sharing?userId=' + goodProfitInfo.value.userId,
        data: list,
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            goodProfitFN()
            mathArray.value = []
            profitVisible.value = false
            fuzhufenrunlist111.value = []
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    } else {
      Message.error('请先输入比例进行辅助计算后，再执行此操作')
    }
  }
  //编辑分润
  const profitVisible = ref(false)
  const profitRef = ref()
  const profitInfo = ref({
    mallId: '',
    cost: '',
    price: '',
    commission: '',
    type: 2,
    everyMonthCommission: [],
  })
  function openProfit(val: any) {
    profitInfo.value.type = val.commissionRule
    if (val.mallUser) {
      profitInfo.value.cost = val.mallUser.cost
      profitInfo.value.price = val.mallUser.price
      profitInfo.value.mallId = val.id
      profitInfo.value.commission = val.mallUser.commission
      profitInfo.value.everyMonthCommission = val.mallUser.everyMonthCommission
    } else {
      profitInfo.value.cost = val.cost
      profitInfo.value.price = val.price
      profitInfo.value.mallId = val.id
      profitInfo.value.commission = val.commission
      profitInfo.value.everyMonthCommission = val.everyMonthCommission
    }
    console.log(profitInfo.value.type)
    profitVisible.value = true
  }
  function handleCancelProfit() {
    mathArray.value = []
    profitVisible.value = false
  }
  function handleBeforeProfit() {
    profitRef.value?.validate().then((error: any) => {
      if (!error) {
        post({
          url: '/app/mall/profit/sharing?userId=' + goodProfitInfo.value.userId,
          data: [profitInfo.value],
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              goodProfitFN()
              mathArray.value = []
              profitVisible.value = false
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      }
    })
  }
  //商品分润
  const paginationGoodProfit = usePagination(goodProfitFN)
  const goodProfitVisible = ref(false)
  const goodProfitLoading = ref(false)
  const goodProfitList = ref([])
  const profitNum = ref('')
  const goodProfitInfo = ref({
    userId: '',
    classId: '',
    profitSharing: '',
    mallName: '',
    operatorId: '',
    commissionRule: '',
    channelId: '',
  })
  const mathArray: any = ref([])
  function openGoodProfit(val: any) {
    channelListFn()
    goodProfitInfo.value.userId = val.id
    mathArray.value = []
    fuzhufenrunlist111.value = []
    profitNum.value = ''
    classListFn()
    goodAllListFn()
    goodProfitFN(1)
    goodProfitVisible.value = true
  }
  function goodProfitFN(val?: any) {
    goodProfitLoading.value = true
    if (val) {
      paginationGoodProfit.page = val
    }
    get({
      url: '/app/mall/profit/sharing/list',
      data: {
        page: paginationGoodProfit.page,
        size: paginationGoodProfit.pageSize,
        ...goodProfitInfo.value,
      },
    }).then((res: any) => {
      goodProfitLoading.value = false
      res.data.list.forEach((item: any) => {
        if (item.mallUser) {
          item.runState = 1
        } else {
          item.runState = 0
        }
      })
      goodProfitList.value = res.data.list
      paginationGoodProfit.setTotalSize((res.data as any).totalSize)
    })
  }
  const goodProfitTableList = ref([
    {
      title: '商品名称',
      key: 'name',
      dataIndex: 'name',
      checked: true,
      width: 250,
    },
    {
      title: '商品成本',
      key: 'cost',
      dataIndex: 'cost',
      checked: true,
      width: 100,
    },
    {
      title: '商品售价',
      key: 'price',
      dataIndex: 'price',
      checked: true,
      width: 100,
    },
    {
      title: '商品佣金',
      key: 'commission1',
      dataIndex: 'commission1',
      checked: true,
      width: 100,
    },
    {
      title: '客户成本',
      key: 'mallCost',
      dataIndex: 'mallCost',
      checked: true,
      width: 100,
    },

    {
      title: '客户售价',
      key: 'mallPrice',
      dataIndex: 'mallPrice',
      checked: true,
      width: 100,
    },

    {
      title: '客户佣金',
      key: 'commission',
      dataIndex: 'commission',
      checked: true,
      width: 100,
    },
    {
      title: '我的利润',
      key: 'mallProfit',
      dataIndex: 'mallProfit',
      checked: true,
      width: 100,
    },
    {
      title: '佣金规则',
      key: 'commissionRule',
      dataIndex: 'commissionRule',
      checked: true,
      width: 100,
    },
    {
      title: '分润状态',
      key: 'state',
      dataIndex: 'state',
      checked: true,
      width: 100,
    },

    {
      title: '操作',
      key: 'actions',
      fixed: 'right',
      dataIndex: 'actions',
      width: 120,
      align: 'left',
      checked: true,
    },
  ])
  const goodAllList: any = ref([])
  function goodAllListFn() {
    useCommon.mallFn().then((res) => {
      goodAllList.value = res.data
    })
  }
  const classLists: any = ref([])
  function classListFn() {
    get({
      url: '/app/mall/class/list',
    }).then((res: any) => {
      classLists.value = res.data
    })
  }
  //邀请码
  const invitationVisible = ref(false)
  const invitationForm: any = ref({
    code: '',
    id: '',
  })
  const invitationRef = ref()
  function openCode(val: any) {
    if (val.code) {
      invitationForm.value.code = val.code
      invitationForm.value.id = val.id
    } else {
      invitationForm.value.code = ''
      invitationForm.value.id = val.id
    }
    invitationVisible.value = true
  }
  function handleCancelInvitation() {
    invitationVisible.value = false
  }
  function handleBeforeOkInvitation() {
    invitationRef.value?.validate().then((error: any) => {
      if (!error) {
        http
          .get({
            url: '/app/user/set/code',
            data: () => {
              return {
                ...invitationForm.value,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancelInvitation()
              passForms.value?.resetFields()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      }
    })
  }
  //代理版权
  const copyrightVisibles = ref(false)
  const copyrightVisible = ref(false)
  const classList = ref([])
  const classTableList = ref([
    {
      title: '域名ID',
      key: 'id',
      dataIndex: 'id',
      checked: true,
      width: 170,
    },
    {
      title: '域名',
      key: 'host',
      dataIndex: 'host',
      checked: true,
      width: 223,
    },
    {
      title: '操作',
      key: 'actions',
      fixed: 'right',
      dataIndex: 'actions',
      width: 150,
      align: 'left',
      checked: true,
    },
  ])
  const copyrightRef = ref()
  const copyrightInfo: any = ref({
    userId: '',
    host: '',
    list: [''],
  })
  function addCopyright() {
    copyrightInfo.value.id = null
    copyrightVisibles.value = true
  }
  function openUpdateClass(val: any) {
    copyrightInfo.value = JSON.parse(JSON.stringify(val))
    copyrightVisibles.value = true
  }
  function openDeleClass(val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此代理域名吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        get({
          url: '/app/user/host/delete',
          data: () => {
            return {
              id: val.id,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              openCopyright({ id: copyrightInfo.value.userId })
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  function handleCancelCopyright() {
    copyrightInfo.value.host = ''
    copyrightVisibles.value = false
  }

  function handleBeforeCopyright() {
    copyrightRef.value?.validate().then((error: any) => {
      if (!error) {
        if (copyrightInfo.value.id) {
          formpost({
            url: '/app/user/host/update',
            data: copyrightInfo.value,
          })
            .then((res) => {
              if (res.code == 0) {
                handleCancelCopyright()
                Message.success(res.msg)
                openCopyright({ id: copyrightInfo.value.userId })
              } else {
                Message.error(res.msg)
              }
            })
            .catch(console.log)
        } else {
          const arr = copyrightInfo.value.host.split(/\n/g)
          post({
            url: '/app/user/host/add?userId=' + copyrightInfo.value.userId,
            data: arr,
          })
            .then((res) => {
              if (res.code == 0) {
                handleCancelCopyright()
                Message.success(res.msg)
                openCopyright({ id: copyrightInfo.value.userId })
              } else {
                Message.error(res.msg)
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  function openCopyright(val: any) {
    copyrightInfo.value.userId = val.id
    get({
      url: '/app/user/host/get/list',
      data: { userId: val.id },
    })
      .then((res) => {
        if (res.data.length > 0) {
          classList.value = res.data
        } else {
          classList.value = []
        }
        copyrightVisible.value = true
      })
      .catch(console.log)
  }

  const tableIndex = ref(0)
  function handleRowClick(record: any) {
    // 获取行的下标
    tableIndex.value = table.dataList.findIndex((element: any) => element.id === record.id)
  }
  function previousFn() {
    tableIndex.value--
    if (tableIndex.value < 0) {
      tableIndex.value = table.dataList.length - 1
      updatUserPop(table.dataList[tableIndex.value])
    } else {
      updatUserPop(table.dataList[tableIndex.value])
    }
    activeBatch.value = 'user'
  }

  function nextFn() {
    tableIndex.value++
    if (tableIndex.value > table.dataList.length - 1) {
      tableIndex.value = 0
      updatUserPop(table.dataList[tableIndex.value])
    } else {
      updatUserPop(table.dataList[tableIndex.value])
    }

    activeBatch.value = 'user'
  }
  //好卡佣金
  const pagination66 = usePagination(doRefresh66)
  const data66 = ref([])
  const tableColumns66: any = reactive({
    list: [
      {
        title: '佣金ID',
        key: 'orderId',
        dataIndex: 'orderId',
        checked: true,
        width: 120,
      },
      {
        title: '卡号',
        key: 'card',
        dataIndex: 'card',
        checked: true,
        width: 120,
      },
      {
        title: '套餐名称',
        key: 'setMealName',
        dataIndex: 'setMealName',
        checked: true,
        width: 120,
      },

      {
        title: '返佣金额',
        key: 'amount',
        dataIndex: 'amount',
        checked: true,
        width: 120,
      },
      {
        title: '返佣状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 120,
      },
      {
        title: '创建时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        checked: true,
        width: 120,
        fixed: 'right',
      },
    ],
  })
  const form66 = reactive({
    userIds: '', //管理员id
    systemOrderNumber: '',
    level: '',
    states: '', // 登陆状态
    addTime: '',
    endTime: '',
  })
  const onDeleteItem66 = (item: any) => {
    Modal.warning({
      title: '操作提示',
      titleAlign: 'start',
      content: '确定要回收佣金？',
      hideCancel: false,
      onOk() {
        get({
          url: rebaterecovery,
          data: () => {
            return {
              orderId: item.orderId,
              userId: item.userId,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh66()
          }
        })
      },
    })
  }
  function doRefresh66(value?: number) {
    tableLoadings.value = true
    if (value) {
      pagination66.page = value
    }
    form66.userIds = userInfos.obj.id
    http
      .formpost({
        url: '/app/order/rebate/get/list',
        data: {
          ...form66,
          page: pagination66.page,
          size: pagination66.pageSize,
        },
      })
      .then((res) => {
        tableLoadings.value = false
        data66.value = res.data.list
        pagination66.setTotalSize((res.data as any).totalSize)
        return res.data.list
      })
  }
  //资金明细
  const pagination55 = usePagination(doRefresh55)
  const data55 = ref([])
  const tableLoadings = ref(false)
  const tableColumns55: any = reactive({
    list: [
      {
        title: '交易ID',
        key: 'id',
        dataIndex: 'id',
        ellipsis: true,
        tooltip: true,
        checked: true,
        width: 118,
      },

      {
        title: '操作前余额',
        key: 'addBalance',
        dataIndex: 'addBalance',
        checked: true,
        width: 166,
      },
      {
        title: '操作余额',
        key: 'balance',
        dataIndex: 'balance',
        checked: true,
        width: 166,
      },
      {
        title: '操作后余额',
        key: 'endBalance',
        dataIndex: 'endBalance',
        checked: true,
        width: 166,
      },
      {
        title: '类型',
        key: 'type',
        dataIndex: 'type',
        checked: true,
        width: 202,
      },
      {
        title: '状态',
        key: 'add',
        dataIndex: 'add',
        checked: true,
        width: 120,
      },
      {
        title: '备注',
        key: 'remarks',
        dataIndex: 'remarks',
        checked: true,
        width: 220,
      },
      {
        title: '交易时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
    ],
  })
  const form55 = reactive({
    userId: '', //管理员id
    level: '',
    type: '', // 登陆状态
    addTime: '',
    endTime: '',
    id: '',
  })
  function doRefresh55(value?: number) {
    tableLoadings.value = true
    if (value) {
      pagination55.page = value
      if (value == 1) {
        getTypeList()
      }
    }
    form55.userId = userInfos.obj.id
    get({
      url: '/app/user/bill/get/list',
      data: {
        ...form55,
        page: pagination55.page,
        size: pagination55.pageSize,
      },
    }).then((res) => {
      tableLoadings.value = false
      data55.value = res.data.list
      pagination55.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  const useCommon = useCommonStore()
  const balanceForm = reactive({
    remarks: '',
    userId: '',
    type: '',
    addTime: '',
    add: '',
    endTime: '',
    addBalance: '',
    endBalance: '',
  })
  const showBalanc = ref(false)
  const table = useTable()
  const pagination = usePagination(doRefresh)
  const pagination2 = usePagination(getFenruns)
  const pagination3 = usePagination(doRefreshBalance)

  const dataLists = ref([])
  const rowKey = useRowKey('id')
  const visible = ref(false)
  const visibleEdit = ref(false)
  const balancevisible = ref(false)
  const btnLoading = ref(false)
  const ziliaoVisible = ref(false)
  const loadingziliao = ref(false)
  const warvisible = ref(false)
  const updateFenrunisible = ref(false)
  const passvisible = ref(false)
  const statevisible = ref(false)
  const shebeivisible = ref(false)
  const huakavisible = ref(false)
  const jiancevisible = ref(false)
  const classLoading = ref(false)
  const fenrunvisible = ref(false)
  const userForm = ref<typeof Form>()
  const userFormEdit = ref<typeof Form>()
  const passForms = ref<typeof Form>()
  const balanceForms = ref<typeof Form>()
  const huakaForms = ref<typeof Form>()
  const checked1: any = ref('orderly')
  const jianceForm: any = ref({})
  const channel: any = ref([])
  const series: any = ref([])
  const channels: any = ref([])
  const seriess: any = ref([])
  const checked1s = ref(false)
  const card = ref('')
  const activeBatch = ref('user')
  const s: any = ref([])
  const checkFenrunType: any = ref(0)
  const type0Num: any = ref(0)
  const gexingFenrunType: any = ref(0)
  const key = ref('1')
  const urla = ref(window.location.protocol + '//' + window.location.host)
  const totals: any = ref({
    amount: 0,
    card_activation: 0,
    card_total: 0,
  })
  const typeLists = ref([
    {
      name: '客户ID',
      value: 'ids',
    },
    {
      name: '客户账号',
      value: 'userName',
    },
    {
      name: '客户姓名',
      value: 'names',
    },
    {
      name: '客户手机号',
      value: 'phones',
    },
  ])
  const type: any = ref('userName')
  const typeText: any = ref('')
  const fenrunUpdateForm: any = ref({
    name: '',
    setMealId: '', //套餐ID
    cost: '', //套餐成本
    price: '', //套餐售价
    close: true, //状态true关闭,  false正常
  })
  const huakaForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    userId: '',
    cardMultiline: '',
  })
  const userZong: any = ref({})
  const stateForm = reactive({
    id: '',
    state: '',
    stateRemarks: '',
  })
  const form = reactive({
    ids: '',
    userName: '',
    names: '',
    phones: '',
    state: '',
    addTime: '',
    endTime: '',
    realName: '',
    warningState: '',
    addBalance: '',
    endBalance: '',
    grade: '1',
  })
  const fenrunForm: any = reactive({
    channelId: '',
    seriesId: '',
    type: '',
    userId: '',
    profit: 0,
  })
  const subForm = reactive({
    passWordmd5: '',
    userName: '', //用户名
    passWord: '', //登录密码(如果为空为默认密码123456)
    phone: '', //手机号
    email: '', ///邮箱
    warningBalance: '', //余额预警
    remarks: '',
  })
  const passForm = reactive({
    id: '',
    passWord: '',
    passWordmd5: '',
  })
  const warForm = ref({
    id: '',
    api: false, //是否有调用接口权限
    batchRecharge: false, //是否有批量充值权限
    collection: false, //是否有自收款权限
    cardLogin: true, //是否有充值前端登录权限
    cardOperation: true, //是否有卡操作权限(停机, 复机)
    customSetRealName: true, //是否有套餐名称修改权限
    customLogo: true, //是否有自定义logo权限
  })
  const warForms = ref()
  const subFormEdit = ref({
    userName: '', //用户名
    phone: '', //手机号
    email: '', ///邮箱
    warningBalance: '', //余额预警
    remarks: '',
    api: false, //是否有调用接口权限
    batchRecharge: false, //是否有批量充值权限
    collection: false, //是否有自收款权限
    cardLogin: true, //是否有充值前端登录权限
    cardOperation: true, //是否有卡操作权限(停机, 复机)
    customSetRealName: true, //是否有套餐名称修改权限
    customLogo: true, //是否有自定义logo权限
  })
  const banlanceForm: any = reactive({
    type: '0',
    balance: 0,
    remarks: '',
  })
  const userInfos: any = reactive({
    obj: {
      children: [],
      parent: [],
    },
  })
  const tableColumnsfenrunList = reactive({
    list: [
      {
        title: '套餐名称',
        key: 'name',
        dataIndex: 'name',
        checked: true,
        align: 'left',
        width: 200,
      },
      {
        title: '系统成本',
        key: 'cost',
        dataIndex: 'cost',
        checked: true,
        width: 100,
        align: 'left',
      },
      {
        title: '系统售价',
        key: 'price',
        dataIndex: 'price',
        checked: true,
        width: 100,
        align: 'left',
      },
      {
        title: '客户成本',
        key: 'usercost',
        dataIndex: 'usercost',
        checked: true,
        width: 100,
        align: 'left',
      },
      {
        title: '客户售价',
        key: 'userprice',
        dataIndex: 'userprice',
        checked: true,
        width: 100,
        align: 'left',
      },
      {
        title: '套餐状态',
        key: 'close',
        dataIndex: 'close',
        checked: true,
        width: 120,
        align: 'left',
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        checked: true,
        width: 120,
        align: 'left',
      },
    ],
  })
  const table2: any = reactive({
    dataList: [],
  })

  const fun = (val) => {}
  const tableColumns: any = reactive({
    list: [
      {
        title: 'ID',
        key: 'id',
        dataIndex: 'id',
        checked: true,
        width: 80,
      },
      {
        title: '客户账号',
        key: 'userName',
        dataIndex: 'userName',
        checked: true,
        width: 220,
      },
      {
        title: '账户余额',
        key: 'balance',
        dataIndex: 'balance',
        checked: true,
        width: 120,
      },
      {
        title: '卡板总数',
        key: 'total',
        dataIndex: 'total',
        checked: true,
        width: 120,
      },
      {
        title: '激活总数',
        key: 'activation',
        dataIndex: 'activation',
        checked: true,
        width: 120,
      },
      {
        title: '激活比例',
        key: 'print',
        dataIndex: 'print',
        checked: true,
        width: 100,
      },
      {
        title: '在线设备',
        key: 'sessions',
        dataIndex: 'sessions',
        checked: true,
        width: 100,
      },
      {
        title: '账户实名',
        key: 'userRealName',
        dataIndex: 'userRealName',
        checked: true,
        width: 100,
      },
      {
        title: '接口权限',
        key: 'api',
        dataIndex: 'api',
        checked: true,
        width: 100,
      },
      {
        title: '状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '备注',
        key: 'remarks',
        dataIndex: 'remarks',
        checked: true,
        width: 150,
      },
      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 200,
        align: 'left',
        checked: true,
      },
    ],
    balanceList: [
      {
        title: '操作前余额',
        key: 'addBalance',
        dataIndex: 'addBalance',
        checked: true,
        width: 166,
      },
      {
        title: '操作余额',
        key: 'balance',
        dataIndex: 'balance',
        checked: true,
        width: 166,
      },
      {
        title: '操作后余额',
        key: 'endBalance',
        dataIndex: 'endBalance',
        checked: true,
        width: 166,
      },
      {
        title: '类型',
        key: 'type',
        dataIndex: 'type',
        checked: true,
        width: 202,
      },
      {
        title: '状态',
        key: 'add',
        dataIndex: 'add',
        checked: true,
        width: 120,
      },
      {
        title: '备注',
        key: 'remarks',
        dataIndex: 'remarks',
        checked: true,
        width: 220,
      },
      {
        title: '交易时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
    ],
  })
  const sessionColumns = [
    {
      width: 130,
      title: '登录IP',
      key: 'ip',
      dataIndex: 'ip',
    },
    {
      width: 100,
      title: '登录地址',
      key: 'address',
      dataIndex: 'address',
    },
    {
      width: 120,
      key: 'operatingSystem',
      title: '操作系统',
      dataIndex: 'operatingSystem',
    },
    { width: 100, key: 'browser', title: '浏览器', dataIndex: 'browser' },
    {
      width: 190,
      key: 'loginTime',
      title: '登录时间',
      dataIndex: 'loginTime',
    },
    {
      width: 190,
      key: 'lastAccessedTime',
      title: '最后访问',
      dataIndex: 'loginTime',
    },
    {
      width: 180,
      key: 'time',
      title: '在线时长',
      dataIndex: 'time',
    },
    {
      title: '操作',
      key: 'actions',
      dataIndex: 'actions',
      width: 80,
      align: 'left',
    },
  ]
  const sessionList: any = ref([])
  const state = ref([
    {
      id: 1,
      name: '全部客户',
      img: '',
      number: 20000,
      introduce: '',
    },
    {
      id: 2,
      name: '活跃客户',
      img: '',
      number: 20000,
      introduce: '最近30天产生过订单的客户',
    },
    {
      id: 3,
      name: '新增客户',
      img: '',
      number: 10000,
      introduce: '最近30天新增并且产生订单记录的客户',
    },
    {
      id: 4,
      name: '冻结客户',
      img: '',
      number: 10000,
      introduce: '冻结状态的客户',
    },
    {
      id: 5,
      name: '流失客户',
      img: '',
      number: 10000,
      introduce: '近90天产生过订单的客户;近30天未产生过订单的客户',
    },
  ])
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const loginList = ref([])
  const tiXianList = ref([])
  //登录日志
  const paginationLogin = usePagination(doRefreshLogin)
  const loginForm = ref({
    userId: '', //客户id
    ip: '', //登录ip
    success: '', // 登陆状态
    addTime: '',
    endTime: '',
  })
  const handleClickInfo = (val: any) => {
    Modal.error({
      title: '错误报文',
      content: val,
    })
  }
  const tableColumns1 = reactive({
    list: [
      {
        title: '登录ip',
        key: 'ip',
        dataIndex: 'ip',
        align: 'center',
        checked: true,
        width: 100,
      },

      {
        title: '登录地址',
        key: 'address',
        dataIndex: 'address',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录设备',
        key: 'operatingSystem',
        dataIndex: 'operatingSystem',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '浏览器',
        key: 'browser',
        dataIndex: 'browser',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录状态',
        key: 'state',
        dataIndex: 'state',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '登录时间',
        key: 'time',
        dataIndex: 'time',
        align: 'center',
        checked: true,
        width: 190,
      },
    ],
    list1: [
      {
        title: '提现ID',
        key: 'id',
        dataIndex: 'id',
        checked: true,
        width: 120,
      },
      {
        title: '提现姓名',
        key: 'name',
        dataIndex: 'name',
        checked: true,
        width: 120,
      },
      {
        title: '提现账号',
        key: 'accountNumber',
        dataIndex: 'accountNumber',
        checked: true,
        width: 220,
      },
      {
        title: '其他信息',
        key: 'other',
        dataIndex: 'other',
        checked: true,
        width: 100,
      },
      {
        title: '提现途径',
        key: 'type',
        dataIndex: 'type',
        checked: true,
        width: 120,
      },
      {
        title: '提现金额',
        key: 'amount',
        dataIndex: 'amount',
        checked: true,
        width: 120,
      },
      {
        title: '手续费',
        key: 'serviceCharge',
        dataIndex: 'serviceCharge',
        checked: true,
        width: 120,
      },
      {
        title: '代扣税',
        key: 'withholdingTax',
        dataIndex: 'withholdingTax',
        checked: true,
        width: 120,
      },
      {
        title: '实际到账',
        key: 'receiptBalance',
        dataIndex: 'receiptBalance',
        checked: true,
        width: 120,
      },
      {
        title: '打款方式',
        key: 'payTemplateId',
        dataIndex: 'payTemplateId',
        checked: true,
        width: 120,
      },
      {
        title: '提现状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 120,
      },
      {
        title: '提现时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
      {
        title: '处理时间',
        key: 'handlerTime',
        dataIndex: 'handlerTime',
        checked: true,
        width: 190,
      },
      {
        title: '客户备注',
        key: 'userRemarks',
        dataIndex: 'userRemarks',
        checked: true,
        width: 120,
      },
      {
        title: '处理备注',
        key: 'adminRemarks',
        dataIndex: 'adminRemarks',
        checked: true,
        width: 120,
      },
    ],
  })
  function doRefreshLogin(value?: any) {
    tables.tableLoading = true
    if (value) {
      paginationLogin.page = value
    }
    loginForm.value.userId = userInfos.obj.id
    get({
      url: loginUser,
      data: {
        ...loginForm.value,
        page: paginationLogin.page,
        size: paginationLogin.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      loginList.value = res.data.list
      paginationLogin.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  const typeLists77 = ref([
    {
      name: '提现订单号',
      value: 'outTradeNo',
    },
    {
      name: '支付商户号',
      value: 'outTradeNo',
    },
    {
      name: '提现姓名',
      value: 'name',
    },
    {
      name: '提现账号',
      value: 'accountNumber',
    },
    {
      name: '发起提现IP',
      value: 'ip',
    },
  ])
  function changeType77() {
    tiXianForm.value.outTradeNo = ''
    tiXianForm.value.transactionNo = ''
    tiXianForm.value.name = ''
    tiXianForm.value.accountNumber = ''
    tiXianForm.value.ip = ''
    typeText77.value = ''
  }
  const type77 = ref('outTradeNo')
  const typeText77 = ref('')
  //提现记录
  const tiXianForm = ref({
    userId: '', //            客户ID
    payTemplateId: '', //            支付模板ID
    type: '', //            提现类型 0支付宝 1微信 2银行卡
    manual: '', //           true 手动处理 false自动打款
    outTradeNo: '', //           提现订单号
    transactionNo: '', //           交易订单号
    name: '', //           收款人姓名
    accountNumber: '', //   收款账号
    state: '', //          提现状态 0等待 1正在 2通过 3驳回
    ip: '', //           ip
    addTime: '', //         申请提现时间开始
    endTime: '', //         申请提现时间结束
    addHandlerTime: '', //    处理提现时间开始
    endHandlerTime: '', //   处理提现时间结束
    addAmount: '', //   开始提现金额
    endAmount: '', //   结束提现金额
    addServiceCharge: '', //  手续费开始
    endServiceCharge: '', // 手续费结束
    addWithholdingTax: '', // 代扣税开始
    endWithholdingTax: '', // 代扣税结束
    addReceiptBalance: '', // 实际到账金额开始
    endReceiptBalance: '', // 实际到账结束
  })
  const paginationTiXian = usePagination(doRefreshTiXian)
  function doRefreshTiXian(value?: any) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    tiXianForm.value.userId = userInfos.obj.id
    get({
      url: withdrawalList,
      data: {
        page: paginationTiXian.page,
        size: paginationTiXian.pageSize,
        ...tiXianForm.value,
      },
    })
      .then((res) => {
        tables.tableLoading = false
        res.data.list.forEach((item: any) => {
          if (item.information) {
            item.show = item.information.includes('private')
          } else {
            item.show = false
          }
        })
        tiXianList.value = res.data.list
        paginationTiXian.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }
  //获取key
  const keys = () => {
    Modal.warning({
      title: '操作确认',
      content: '确定要执行此操作吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确认',
      onOk: () => {
        http
          .get({
            url: keyUser,
            data: {
              id: userInfos.obj.id,
            },
          })
          .then((res) => {
            userInfos.obj.key = res.data
            http
              .get({
                url: lookUserInfo,
                data: () => {
                  return {
                    id: userInfos.obj.id,
                  }
                },
              })
              .then((res) => {
                s.value = [res.data.id]
                loadingziliao.value = false
                if (res.data.parent) {
                  res.data.parent.reverse()
                }
                res.data.urls = window.location.protocol + '//' + window.location.host
                userInfos.obj = res.data
              })
            Message.success(res.msg)
          })
      },
    })
  }
  //复制
  const copy = (val: any) => {
    let input = document.createElement('input')
    input.value = val
    input.id = 'creatDoms'
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    Message.success('复制成功')
  }
  const cardsVisible = ref(false)
  const open = () => {
    cardsVisible.value = true
  }
  const tableLoadingBalance = ref(false)
  const typeListBalence = ref([])
  //客户余额明细
  //操作类型
  function getTypeList() {
    http
      .get({
        url: getBillType,
        data: () => {
          return {}
        },
      })
      .then((res) => {
        typeListBalence.value = res.data
      })
  }
  //客户余额明细列表
  function doRefreshBalance(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoadingBalance.value = true
    if (value) {
      pagination3.page = value
    }
    http
      .get({
        url: getUserHistor,
        data: () => {
          return {
            page: pagination3.page,
            size: pagination3.pageSize,
            ...balanceForm,
          }
        },
      })
      .then((res) => {
        tableLoadingBalance.value = false
        dataLists.value = res.data.list
        pagination3.setTotalSize((res.data as any).totalSize)
      })
  }

  //客户明细弹窗重置搜索项

  function typeFn() {
    form.ids = ''
    form.userName = ''
    form.names = ''
    form.phones = ''
    typeText.value = ''
  }
  function cardsFn() {
    const arr = card.value.split(/\n/g)
    typeText.value = arr.toString()
    cardsVisible.value = false
  }
  const colse = () => {
    cardsVisible.value = false
  }
  const aaaas = ref(false)

  function setBan(val: any) {
    warForm.value = JSON.parse(JSON.stringify(val))
    warvisible.value = true
  }
  function showAdd() {
    visible.value = true
  }
  function handleSetBan() {
    warForms.value?.resetFields()
    warvisible.value = false
  }
  function handleCancel() {
    userForm.value?.resetFields()
    visible.value = false
  }
  function handleCancelhuaka() {
    huakaForms.value?.resetFields()
    huakavisible.value = false
  }
  function handleCancelEdit() {
    userFormEdit.value?.resetFields()
    visibleEdit.value = false
  }
  const updateFenrunForms = ref<typeof Form>()
  const handleCancelUpdateFenrun = () => {
    updateFenrunForms.value?.resetFields()
    updateFenrunisible.value = false
  }
  const handleCancelPass = () => {
    passForms.value?.resetFields()
    passvisible.value = false
  }
  const stateRef = ref()
  const handleCancelstate = () => {
    stateRef.value?.resetFields()
    statevisible.value = false
  }
  function getchannel() {
    useCommon.channels().then((res: any) => {
      channel.value = res.data
    })
  }
  function getseries() {
    useCommon.seriess().then((res: any) => {
      series.value = res.data
    })
  }
  function clickSj() {
    let code = ''
    let characters = 'abcdefghijklmnopqrstuvwxyz'
    characters += '0123456789'
    for (let i = 0; i < 8; i++) {
      code += characters.charAt(Math.floor(Math.random() * characters.length))
    }
    subForm.passWordmd5 = code //把code值赋给data中定义好的password
  }

  function clickSjs() {
    let code = ''
    let characters = 'abcdefghijklmnopqrstuvwxyz'
    characters += '0123456789'
    for (let i = 0; i < 8; i++) {
      code += characters.charAt(Math.floor(Math.random() * characters.length))
    }
    passForm.passWordmd5 = code //把code值赋给data中定义好的password
  }
  const inputgetRecord = (item: any) => {
    fenrunUpdateForm.value = {
      setMealId: item.id, //套餐ID
      cost: item.setMealUser.cost, //套餐成本
      price: item.setMealUser.price, //套餐售价
      close: item.setMealUser.close, //状态true关闭,  false正常
    }
  }
  const forms: any = ref({
    setMealId: '', //套餐ID
    cost: '', //套餐成本
    price: '', //套餐售价
    close: true, //状态true关闭,  false正常
  })
  //修改客户备注
  function changeRemarks(val: any) {
    http
      .post({
        url: postEditUser,
        data: () => {
          return {
            ...val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          val.showInput = false
          Message.success(res.msg)
          doRefresh()
        } else {
          Message.error(res.msg)
        }
      })
  }
  const inputSubmit = (item: any) => {
    forms.value = {
      setMealId: item.id, //套餐ID
      cost: item.setMealUser.cost, //套餐成本
      price: item.setMealUser.price, //套餐售价
      close: item.setMealUser.close, //状态true关闭,  false正常
    }
    table2.dataList.forEach((items: any) => {
      if (items.id == item.id) {
        items.showInput = false
        items.showInputs = false
      }
    })
    if (
      forms.value.cost == fenrunUpdateForm.value.cost &&
      forms.value.price == fenrunUpdateForm.value.price &&
      forms.value.setMealId == fenrunUpdateForm.value.setMealId
    ) {
      return false
    }
    let a = []
    table2.dataList = table2.dataList
    a.push(forms.value)
    fenrunSubmit(a)
  }
  const submitUpdateFenrun = () => {
    updateFenrunForms.value?.validate().then((error: any) => {
      if (!error) {
        let a = []
        a.push(fenrunUpdateForm.value)
        fenrunSubmit(a)
      } else {
      }
    })
  }
  const fenrunSubmit = (item: any) => {
    if (item.length <= 0) {
      return false
    }
    http
      .post({
        url: setFenrun + '?userId=' + fenrunForm.userId,
        data: () => {
          return item
        },
      })
      .then((res) => {
        if (res.code == 0) {
          Message.success(res.msg)
          updateFenrunisible.value = false
          updateFenrunForms.value?.resetFields()
          getFenruns()
        }
      })
  }
  const handleBeforeOkhuakas = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        if (checked1.value == 'disOrder') {
          http
            .formpost({
              url: postDisOrderCheck,
              data: () => {
                return {
                  userId: huakaForm.userId,
                  remarks: huakaForm.remarks,
                  cardMultiline: huakaForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                jianceForm.value = res.data
                jiancevisible.value = true
                updatUserPop(subFormEdit.value)
              }
            })
        } else {
          http
            .post({
              url: postOrderlyCheck + '?userId=' + huakaForm.userId,
              data: () => {
                return {
                  addCard: huakaForm.addCard,
                  endCard: huakaForm.endCard,
                  remarks: huakaForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                jianceForm.value = res.data
                jiancevisible.value = true
                updatUserPop(subFormEdit.value)
              }
            })
        }
      }
    })
  }
  const handleOkAuthority = () => {
    http
      .formpost({
        url: authority,
        data: () => {
          return {
            ...warForm.value,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          Message.success(res.msg)
          updatUserPop(warForm.value)
          handleSetBan()
          doRefresh()
        } else {
          Message.error(res.msg)
        }
      })
  }
  const handleBeforeOkhuaka = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        if (checked1.value == 'disOrder') {
          http
            .formpost({
              url: postDisOrder,
              data: () => {
                return {
                  userId: huakaForm.userId,
                  remarks: huakaForm.remarks,
                  cardMultiline: huakaForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                huakaForm.cardMultiline = ''
                huakaForm.remarks = ''
                jianceForm.value = res.data
                jiancevisible.value = true
                updatUserPop(subFormEdit.value)
              }
            })
        } else {
          http
            .post({
              url: postOrderly + '?userId=' + huakaForm.userId,
              data: () => {
                return {
                  addCard: huakaForm.addCard,
                  endCard: huakaForm.endCard,
                  remarks: huakaForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                huakaForm.addCard = ''
                huakaForm.endCard = ''
                huakaForm.remarks = ''
                jianceForm.value = res.data
                jiancevisible.value = true
                updatUserPop(subFormEdit.value)
              }
            })
        }
      }
    })
  }
  const handleBeforeOkPass = () => {
    passForms.value?.validate().then((error: any) => {
      if (!error) {
        passForm.passWord = md5(passForm.passWordmd5)
        http
          .formpost({
            url: changePass,
            data: () => {
              return {
                ...passForm,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              passvisible.value = false
              passForms.value?.resetFields()
              updatUserPop(subFormEdit.value)
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      }
    })
  }
  const handleCancelBan = () => {
    balanceForms.value?.resetFields()
    balancevisible.value = false
  }
  const handleCancelZiliao = () => {
    activeBatch.value = 'user'
    ziliaoVisible.value = false
  }
  const handleCancelsb = () => {
    shebeivisible.value = false
  }
  const ouLine = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要下线此设备吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        http
          .get({
            url: outLineUsers,
            data: () => {
              return {
                session: item.session,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              let id1 = sessionList.value.findIndex((items: any) => {
                if (items.id == item.id) {
                  return true
                }
              })
              sessionList.value.splice(id1, 1)
              Message.success(res.msg)
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      },
    })
  }

  function detailFn(item: any) {
    ziliaoVisible.value = true
    loadingziliao.value = true
    activeBatch.value = '1'
    get({
      url: lookUserInfo,
      data: () => {
        return {
          id: item.id,
        }
      },
    }).then((res) => {
      if (res.data) {
        s.value = [res.data.id]
        loadingziliao.value = false
        if (res.data.parent.length > 1) {
          res.data.parent.reverse()
        }
        res.data.urls = window.location.protocol + '//' + window.location.host
        userInfos.obj = res.data
        // set(userInfos.obj, userInfos.obj)
      }
    })
  }

  function showZiliao(item: any) {
    ziliaoVisible.value = true
    loadingziliao.value = true
    activeBatch.value = '1'

    // get({
    //   url: lookUserInfo,
    //   data: () => {
    //     return {
    //       id: item.id,
    //     }
    //   },
    // }).then((res) => {
    //   if (res.data) {
    //     userInfos.obj = res.data
    //   }
    // })
    // http
    //   .get({
    //     url: lookUserInfo,
    //     data: () => {
    //       return {
    //         id: item.id,
    //       }
    //     },
    //   })
    //   .then((res) => {
    //     s.value = [res.data.id]
    //     loadingziliao.value = false
    //     if (res.data.parent.length > 1) {
    //       res.data.parent.reverse()
    //     }
    //     res.data.urls = window.location.protocol + '//' + window.location.host
    //     const obj = res.data
    //     console.log(obj)
    //     userInfos.obj = obj
    //   })
  }

  function balancePlay(item: any) {
    subFormEdit.value = JSON.parse(JSON.stringify(item))
    banlanceForm.balance = ''
    banlanceForm.id = item.id
    balancevisible.value = true
  }
  function changeState(item: any) {
    stateForm.id = item.id
    stateForm.state = item.state
    stateForm.stateRemarks = item.stateRemarks
    statevisible.value = true
  }
  function changePassWord(item: any) {
    subFormEdit.value = JSON.parse(JSON.stringify(item))
    passForm.id = item.id
    passvisible.value = true
  }
  const serchForm = ref()
  const resetSeach = () => {
    serchForm.value.resetFields()
    form.addBalance = ''
    form.endBalance = ''
    form.ids = ''
    form.userNames = ''
    form.names = ''
    form.phones = ''
    typeText.value = ''
    card.value = ''
    doRefresh(1)
  }
  const serchForm2 = ref()

  const clickT = (item: any) => {
    sessionList.value = JSON.parse(JSON.stringify(item))
    sessionList.value.forEach((element: any) => {
      let atime = Math.floor((new Date().getTime() - new Date(element.loginTime).getTime()) / 1000)
      element.time = useCommon.formatTimeDifference(atime)
    })
    shebeivisible.value = true
  }
  const delimitation = (item: any) => {
    subFormEdit.value = JSON.parse(JSON.stringify(item))
    huakaForm.userId = item.id
    huakavisible.value = true
  }

  //修改备注
  function remarkFn(val: any) {
    table.dataList.forEach((item) => {
      if (item.id == val.id) {
        item.showInputs = true
      }
    })
  }

  function handleBeforeOkstate() {
    http
      .get({
        url: changeUserState,
        data: () => {
          return {
            ...stateForm,
          }
        },
      })
      .then((res) => {
        btnLoading.value = false
        if (res.code == 0) {
          Message.success(res.msg)
          statevisible.value = false
          doRefresh()
        } else {
          Message.error(res.msg)
        }
      })
  }
  const handleBeforeOkBansb = () => {
    shebeivisible.value = false
    doRefresh()
  }
  function handleBeforeOkBan() {
    balanceForms.value?.validate().then((error: any) => {
      if (!error) {
        btnLoading.value = true
        http
          .formpost({
            url: userBalance,
            data: () => {
              return {
                ...banlanceForm,
              }
            },
          })
          .then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              Message.success(res.msg)
              balancevisible.value = false
              balanceForms.value?.resetFields()
              updatUserPop(subFormEdit.value)
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      } else {
      }
    })
  }
  function updatUserPop(item: any, val?: any) {
    subFormEdit.value = JSON.parse(JSON.stringify(item))
    if (subFormEdit.value.remarks == '- - -') {
      subFormEdit.value.remarks = ''
    }
    if (val) {
      ziliaoVisible.value = true
    }
    loadingziliao.value = true
    activeBatch.value = 'user'
    get({
      url: lookUserInfo,
      data: () => {
        return {
          id: subFormEdit.value.id,
        }
      },
    }).then((res) => {
      if (res.data) {
        s.value = [res.data.id]
        loadingziliao.value = false
        if (res.data.parent.length > 1) {
          res.data.parent.reverse()
        }
        res.data.total = subFormEdit.value.cardStatistics.total
        res.data.activation = subFormEdit.value.cardStatistics.activation
        res.data.urls = window.location.protocol + '//' + window.location.host
        res.data.children.forEach((item: any) => {
          item.show = false
        })
        userInfos.obj = res.data
      }
    })
  }
  function updatUserPops(item: any) {
    subFormEdit.value = JSON.parse(JSON.stringify(item))
    if (subFormEdit.value.remarks == '- - -') {
      subFormEdit.value.remarks = ''
    }
    visibleEdit.value = true
  }
  function showfenrun(item: any) {
    fenrunForm.userId = item.id
    fenrunForm.channelId = ''
    fenrunForm.seriesId = ''
    fenrunForm.type = ''
    fenrunForm.profit = 0
    fuzhufenrunlist.value = []
    type0Num.value = 0
    gexingFenrunType.value = 0
    fenrunvisible.value = true
    useCommon.seriess().then((res) => {
      seriess.value = res.data
    })
    // getchannel()
    // getseries()
    getFenruns()
  }

  function getLists() {
    http
      .get({
        url: getFenrunReset,
        data: () => {
          return {
            userId: fenrunForm.userId,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          Message.success(res.message)
          getFenruns(1)
        }
      })
  }
  function resetFenrun(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定回收这个分润吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        http
          .get({
            url: recovery,
            data: () => {
              return {
                userId: fenrunForm.userId,
                setMealId: item.id,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              getFenruns()
            } else {
              Message.error(res.msg)
            }
          })
      },
    })
  }
  function showUpdateFenrun(item: any) {
    if (item.setMealUser) {
      fenrunUpdateForm.value = {
        name: item.setMealUser.name,
        setMealId: item.id, //套餐ID
        cost: item.setMealUser.cost, //套餐成本
        price: item.setMealUser.price, //套餐售价
        close: item.setMealUser.close, //状态true关闭,  false正常
      }
    } else {
      fenrunUpdateForm.value = {
        name: '',
        setMealId: item.id, //套餐ID
        cost: '', //套餐成本
        price: item.price, //套餐售价
        close: false, //状态true关闭,  false正常
      }
    }

    updateFenrunisible.value = true
  }
  // 监听对象
  watch(
    () => fenrunForm,
    () => {
      getFenruns(1)
    },
    {
      deep: true, // 深度监听的参数
    }
  )
  function getFenruns(value?: any) {
    classLoading.value = true
    if (value) {
      pagination2.page = value
    }
    http
      .get({
        url: getFenrunList,
        data: () => {
          return {
            page: pagination2.page,
            size: pagination2.pageSize,
            ...fenrunForm,
          }
        },
      })
      .then((res) => {
        classLoading.value = false
        res.data.list.forEach((element: any) => {
          element.showInput = false
          element.showInputs = false
          if (element.setMealUser) {
            element.runState = 1
          } else {
            element.runState = 0
          }
        })
        table2.dataList = res.data.list
        pagination2.setTotalSize((res.data as any).totalSize)
      })
  }
  const fuzhufenrunlist: any = ref([])
  function changeType() {
    fuzhufenrunlist.value = []
    type0Num.value = 0
  }
  function fuzhuClick() {
    fuzhufenrunlist.value = []
    if (type0Num.value == undefined || type0Num.value == 0) return false
    table2.dataList.forEach((item1: any) => {
      if (checkFenrunType.value == 0) {
        if (item1.setMealUser) {
          item1.setMealUser.cost = Number(
            (item1.price - Math.floor(item1.price * (type0Num.value / 100) * 100) / 100).toFixed(2)
          )

          if (item1.setMealUser.price < item1.setMealUser.cost) {
            item1.setMealUser.price = item1.price
          }
        } else {
          item1.setMealUser = {
            cost: Number(
              (item1.price - Math.floor(item1.price * (type0Num.value / 100) * 100) / 100).toFixed(
                2
              )
            ), //套餐成本
            price: item1.price, //套餐售价
            close: false, //状态true关闭,  false正常
          }
        }
        fuzhufenrunlist.value.push({
          setMealId: item1.id, //套餐ID
          cost: item1.setMealUser.cost, //套餐成本
          price: item1.setMealUser.price, //套餐售价
          close: false, //状态true关闭,  false正常
        })
      } else {
        if (gexingFenrunType.value == 0) {
          if (item1.setMealUser) {
            item1.setMealUser.cost = item1.cost + type0Num.value
            if (item1.setMealUser.price < item1.setMealUser.cost) {
              item1.setMealUser.price = item1.setMealUser.cost
            }
          } else {
            item1.setMealUser = {
              cost: item1.cost + type0Num.value, //套餐成本
              price: item1.cost + type0Num.value, //套餐售价
              close: false, //状态true关闭,  false正常
            }
          }
          fuzhufenrunlist.value.push({
            setMealId: item1.id, //套餐ID
            cost: item1.setMealUser.cost, //套餐成本
            price: item1.setMealUser.price, //套餐售价
            close: false, //状态true关闭,  false正常
          })
        } else if (gexingFenrunType.value == 1) {
          if (item1.setMealUser) {
            item1.setMealUser.cost = item1.price - type0Num.value
            if (item1.setMealUser.price < item1.setMealUser.cost) {
              item1.setMealUser.price = item1.setMealUser.cost
            }
          } else {
            item1.setMealUser = {
              cost: item1.price - type0Num.value, //套餐成本
              price: item1.price - type0Num.value, //套餐售价
              close: false, //状态true关闭,  false正常
            }
          }
          fuzhufenrunlist.value.push({
            setMealId: item1.id, //套餐ID
            cost: item1.setMealUser.cost, //套餐成本
            price: item1.setMealUser.price, //套餐售价
            close: false, //状态true关闭,  false正常
          })
        } else if (gexingFenrunType.value == 2) {
          if (item1.setMealUser) {
            item1.setMealUser.cost = item1.setMealUser.cost + type0Num.value
            if (item1.setMealUser.price < item1.setMealUser.cost) {
              item1.setMealUser.price = item1.setMealUser.cost
            }
          }
          fuzhufenrunlist.value.push({
            setMealId: item1.id, //套餐ID
            cost: item1.setMealUser.cost, //套餐成本
            price: item1.setMealUser.price, //套餐售价
            close: false, //状态true关闭,  false正常
          })
        }
      }
    })
    // setTimeout(() => {

    // }, 1000);
  }
  function submitFenrunList() {
    fenrunSubmit(fuzhufenrunlist.value)
  }
  function handleBeforeOkEdit() {
    userFormEdit.value?.validate().then((error: any) => {
      if (!error) {
        btnLoading.value = true
        http
          .post({
            url: postEditUser,
            data: () => {
              return {
                ...subFormEdit.value,
              }
            },
          })
          .then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              Message.success(res.msg)
              visibleEdit.value = false
              userFormEdit.value?.resetFields()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      } else {
      }
    })
  }
  function handleBeforeOk() {
    userForm.value?.validate().then((error: any) => {
      if (!error) {
        btnLoading.value = true
        if (subForm.passWordmd5 != '') {
          subForm.passWord = md5(subForm.passWordmd5)
        }
        http
          .post({
            url: postAddUser,
            data: () => {
              return {
                ...subForm,
              }
            },
          })
          .then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              if (checked1s.value == true) {
                userForm.value?.resetFields()
                Message.success('新建成功，当前已开始新建新的客户')
                doRefresh()
              } else {
                Message.success(res.msg)
                visible.value = false
                userForm.value?.resetFields()
                doRefresh()
              }
            } else {
              Message.error(res.msg)
            }
          })
      } else {
      }
    })
  }

  function userStatisticsFn() {
    http
      .get({
        url: userStatistics,
        data: () => {
          return {
            ...form,
          }
        },
      })
      .then((res) => {
        if (res.data.card_activation) {
          totals.value = res.data
        } else {
          res.data.card_activation = 0
          totals.value = res.data
        }
      })
  }

  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    form[type.value] = typeText.value
    http
      .get({
        url: getUserList,
        data: () => {
          return {
            page: pagination.page,
            size: pagination.pageSize,
            ...form,
          }
        },
      })
      .then((res) => {
        tableLoading.value = false
        res.data.list.forEach((item) => {
          item.showInputs = false
          // item.remark = { remarks: '' }
          // if (item.remarks) {
          //   item.remark.remarks = item.remarks
          // } else {
          //   item.remark.remarks = '- - -'
          // }
        })
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
        userStatisticsFn()
      })
  }
  function trawUsers(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定解冻这个账户吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        http
          .get({
            url: trawUser,
            data: () => {
              return {
                id: item.id,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              updatUserPop(item)
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      },
    })
  }
  function onDeleteItem(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此客户吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        http
          .get({
            url: getDelUser,
            data: () => {
              return {
                id: item.id,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              ziliaoVisible.value = false
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      },
    })
  }
  function gotoUser(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要进入客户后台吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        http
          .get({
            url: gotoUserUrl,
            data: () => {
              return {
                id: item.id,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              window.open(
                window.location.protocol + '//' + window.location.host + '/children/home/monitor',
                '_blank'
              )
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      },
    })
  }

  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }
  const loading = ref(false)
  const exportDepartments = () => {
    loading.value = true
    form[type.value] = typeText.value
    useCommon
      .downLoads(exportUser, form, '客户列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }
  function getCardParam(url: any) {
    const params = new URLSearchParams(new URL(url).search)
    return params.get('card')
  }

  onMounted(() => {
    if (history.state.current.includes('?card=')) {
      typeText.value = getCardParam(
        window.location.protocol + '//' + window.location.host + history.state.current
      )
    }
    doRefresh()
    getchannel()
    getseries()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-drawer .arco-drawer-footer) {
    overflow: hidden !important;
  }
  .tabs-button {
    margin-top: 20px;
    :deep(.arco-radio-button-content) {
      width: calc(944px / 6);
      line-height: 35px;
      text-align: center;
      height: 35px;
    }
    :deep(.arco-radio-button.arco-radio-checked) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }
    :deep(.arco-radio-button:hover) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }
  }
  .box {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 5px 10px 10px 0px;

    .line {
      width: 4px;
      height: 15px;
      margin-right: 8px;
      background-color: #40a1ff;
    }
  }
  .display-box {
    display: flex;
    .display-right {
      margin-left: 20px;
      .text {
        font-size: 14px;
        color: #86909c;
        line-height: 23px;
      }
      .text-name {
        font-size: 15px;
        line-height: 25px;
      }
    }
  }
  .padding20 {
    padding: 0 20px;
  }
  .img {
    width: 60px;
    height: 60px;
  }
  .imgs {
    margin-left: 10px;
    width: 60px;
    height: 60px;
  }
  .col-div {
    margin-top: 20px;
    padding: 0 20px;
  }
  .col-div .arco-col {
    margin-bottom: 10px;
  }
  :deep(.arco-radio-button.arco-radio-checked) {
    background-color: rgb(var(--primary-6)) !important;
    color: var(--color-bg-2) !important;
  }

  :deep(.arco-radio-button-content) {
    width: 186px;
    text-align: center;
  }
  .inputsp {
    width: 100px;
    padding: 5px 0;
  }
  .inputsa {
    input:focus {
      padding: 5px 0;
      border: 1px solid #3491fa; /* 更改边框颜色 */
      border-radius: 3px;
      outline: none; /* 移除默认的轮廓线 */
    }
  }
  .copys {
    color: #3491fa;
    cursor: pointer;
  }
  // :deep(.arco-auto-tooltip-content) {
  //   .arco-input-wrapper {
  //     padding-left: 0;
  //     padding-right: 0;
  //   }
  // }
  .top {
    margin-bottom: 20px;
    background-color: var(--color-bg-1);
    border-radius: 10px;

    .box {
      display: flex;
      align-items: center;
      height: 30px;
      margin: 5px 10px;

      .line {
        width: 5px;
        height: 25px;
        margin-right: 8px;
        background-color: #40a1ff;
      }

      .text {
        font-size: 16px;
        line-height: 25px;
        text-align: center;
      }
    }

    .flex {
      display: flex;
      justify-content: space-around;
      margin: 12px 7px;

      .dataBox:last-child {
        margin-right: 0px !important;
      }

      .dataBox {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-right: 20px;
        height: 150px;
        background-image: linear-gradient(rgb(var(--arcoblue-1)), #fff);
        border: 1px solid #f2f3f5;
        border-radius: 10px;

        .img {
          width: 70px;
          height: 70px;
          margin-right: 20px;
          border-radius: 50%;
        }

        .name {
          margin-top: 0;
        }

        .number {
          font-size: 22px;
        }
      }
    }
  }

  :deep(.arco-input-append) {
    padding: 0px;
  }

  :deep(.arco-table-td input) {
    text-align: left;
  }

  .avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .avatar-vip {
      border: 2px solid #cece1e;
    }

    .vip {
      position: absolute;
      top: 0;
      right: -9px;
      width: 15px;
      transform: rotate(60deg);
    }
  }

  .huakaClass :deep(.arco-form-item-message) {
    margin-left: 42px !important;
  }

  .gender-container {
    .gender-icon {
      width: 20px;
    }
  }

  :deep(.arco-collapse-item-content) {
    background-color: var(--color-bg-1) !important;
  }
  .demo-item {
    .text-name {
      color: #86909c;
      font-size: 14px;
    }
    .text-info {
      font-size: 16px;
      margin-top: 10px;
    }
  }
</style>
<style scoped>
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
</style>
